在网页上我有一个缩略图列表,上面有链接框。它们由链接标记包装,可以单击。但是,在它们顶部的链接框中,背景略微透明,它只是文本,而不是可点击的整个框。
这是一组缩略图和链接框的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进行了测试,并且所有这些浏览器都存在问题。
答案 0 :(得分:2)
这是因为a
元素是内联元素,因此它们不会使所有父元素的宽度可用。您可以将此规则添加到您的css:
#column-2 h2 a {
display: block;
}
答案 1 :(得分:2)
我同意上面的评论,但为了使整个透明块可以点击,你还需要从h2中取出填充,然后将填充添加到标签中。
#column-2 h2 {
padding: 0;
}
#column-2 h2 a {
display: block;
padding: 5px 4px;
}
答案 2 :(得分:1)
这只是因为a元素没有显示:默认为阻止。
只需添加这条小行:
#column-2 h2 a { display:block; }