0

在一个网页上，我有一个缩略图列表，上面有链接框。它们由链接标签包裹并且是可点击的。然而，在它们顶部的链接框有一个稍微透明的背景，它只是文本而不是整个框是可点击的。

这是一组缩略图和链接框的 HTML 代码：

<article class="recent-post-item">
    <h2>
        <a  href="link/to/somewhere" title="Permanent link to Something">Something</a>
    </h2>
    <a href="link/to/somewhere" title="Something" class="thumb">
        <img src="someimage.png" alt="Something" width="248" height="125" />
    </a>
</article>

这是相应的样式表：

#column-2 .recent-post-item {
    height: 127px;
    width: 250px;
    position: relative;
    border: none;
}
#column-2 .thumb {
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
#column-2 h2 {
    font-size: 22px;
    background-color:rgba(255,255,255,0.6);
    padding: 5px 4px;
    margin: 0;
    position: absolute;
    z-index: 1;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

这是一个显示问题的工作站点：http: //fuckthepony.dk/wordpress/（我正在谈论的缩略图是中间栏中的缩略图）

有些人告诉我他们没有遇到这个问题。我已经在 Linux 上使用 Opera、Chrome 和 Firefox 进行了测试，并且问题在所有这些浏览器中都存在。

4

3 回答 3

2

这是因为a元素是内联元素，所以它们不会占用所有可用的父级宽度。您可以将此规则添加到您的 CSS： 

#column-2 h2 a {
    display: block;
}
于 2012-05-24T15:25:08.993 回答
2

我同意上面的评论，但要使整个透明块可点击，您还需要取消 h2 的填充并将填充添加到 a 标签。

#column-2 h2 {
    padding: 0;
}

#column-2 h2 a {
    display: block;
    padding: 5px 4px;
}
于 2012-05-24T15:38:24.033 回答
1

那只是因为默认情况下 a 元素没有 display:block 。

只需添加这一行：

#column-2 h2 a { display:block; }
于 2012-05-24T15:25:02.330 回答