Question

我在网页上有一张缩略图列表, 上面有链接框。这些缩略图由链接标签包裹, 可以点击。但是, 在链接框上面有略为透明背景的链接框中, 只有文本, 而不是整个框可以点击。

这是一套缩略图和链接框的 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上用歌剧、铬和火狐测试过,所有这些浏览器都存在这个问题。

Answer 1

我同意上述意见,但为了使整个透明区块能够被点击,你还需要把h2的垫子取下来,然后在标签上加上垫子。

#column-2 h2 {
    padding: 0;
}

#column-2 h2 a {
    display: block;
    padding: 5px 4px;
}

Answer 2

This is because a elements are inline elements, so they don t take all parent s width available. You can add this rule to your css:

#column-2 h2 a {
    display: block;
}

Answer 3

s 只是因为元素没有显示: 默认屏蔽。

添加这一小行:

#column-2 h2 a { display:block; }

友情链接