2

由于布局要求，我在锚标签内附上了一个h4标签和一个标签。p问题是这不能正确验证。我需要链接的锚标记和背景图像上的鼠标悬停动作。

在不破坏布局的情况下执行此操作的正确方法是什么？

这是HTML：

<div class="services">
    <a href="http://corecubed.com/our-services/{url_title}">
        <h4>{home_page_title}</h4>
        <p>{home_page_blurb}</p>
    </a>
</div>

这是CSS：

.services a:link, .services a:visited {
    width: 165px;
    height: 181px;
    display: block;
    color: #5e5e5e;
    text-decoration: none;
    float: left;
    margin: 0 5px 20px 0;
    background: url(/images/bg_services.png) no-repeat center bottom;
}

.services a:hover {
    background-position: center top;
}

.services h4 {
    width: 140px;
    height: 50px;
    display: block;
    font-size: 13px;
    font-weight: normal;
    color: #eaeaea;
    margin: 0;
    padding: 10px 10px 0 15px;
}

.services p { 
    line-height: 19px;
    padding: 0 10px 0 10px; 
}

我愿意接受任何可靠的指导。

4

1 回答 1

2

随着 HTML 的发展，这可能不是问题。

在 HTML5 中，a标签可以包含内联和块级元素（分别是短语和流元素）。

见：http ://www.w3.org/TR/html-markup/a.html#a

例子

我使用了以下代码段：

<a href="http://www.yahoo.com">
    <h3>Go see Yahoo...</h3>
    <p>A short paragraph.</p>
</a>

并创建了以下 HTML5 页面：

http://jsfiddle.net/audetwebdesign/Hm7wp/show/

使用以下验证器http://validator.w3.org，我得到了一个成功的结果，除了警告说 HTML5 验证器是实验性的（正在进行中）。

您可以查看验证结果并检查详细信息。

于 2013-06-12T13:51:39.233 回答