html - 设置绝对定位链接的高度，其中显示：块

Question

希望关于 CSS 问题的一些建议 - 我有一个布局，我绝对将链接文本定位在背景图像之上，但无法让链接扩展到容器的高度（在 IEx 中，在 Chrome 中工作正常）

<div>
    <img />
    <a />            
</div>

包含的 div 具有背景颜色，并且图像的不透明度降低 - 悬停图像时，不透明度进一步降低，泄漏更多的背景颜色。同时，链接的不透明度从 0 变为 100。我也使用了一些 CSS 过渡，只是为了美化它。

我知道定位链接绝对会将其从流程中删除，因此将高度设置为 100% 将不起作用，但我不应该能够明确设置它吗？这样做适用于 Chrome，但不适用于 IE。问题与图像有关，因为如果删除链接，链接会正常运行。

示例：http://jsfiddle.net/thSCJ/8/（包括足够的细节来突出我的问题。在 IE 中，悬停在图像的左上角会显示链接。在 Chrome 中，任何悬停在图像上都会显示链接） .

有什么建议么？

Answer 1

您需要让<a>标签包裹图像和文本：

<a href="#">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6kpJ562NTt7Vkya4ocQ3Aq7mVqNB04ccB9XNCr-b4mPdYU6Y5Yg" width=200 height=200/>
    <span>Link text</span>
</a>​

这是CSS：

a {
    width:200px;
    height:200px;
    background:#cccccc;
}

a:hover > span {
    display: inline;
}

span {
    display: none;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    color:red;      
}

​</p>

小提琴：http: //jsfiddle.net/thSCJ/12/

Answer 2

无需更改不透明度，只需更改font-size属性并将整个内容放入<a>标签中即可。

请参阅此 JSFiddle。