【问题标题】：IE7 Can't render link (with background transparent) over a text?IE7 无法在文本上呈现链接（背景透明）？
【发布时间】：2012-06-18 23:50:53
【问题描述】：

这是我的code：

HTML：

<div class="container">
    <div class="myBox">My Text</div>        
    <a class="myLink" href="http://www.google.com">&nbsp;</a>       
</div>

CSS：

.container
{
    position:relative;
    width:200px;
    height:200px;
}

.myBox
{
    position:absolute;
    top:0;
    left:0;
    z-index:90;
    background-color:#ff0000;
    width:200px;
    height:200px;    
}

.myLink
{
    text-decoration:none; 
    display:block; 
    position:absolute; 
    width:50px; 
    height:50px; 
    top:0px; 
    left:0px; 
    z-index:100;
}

在 IE7 上，“我的文本”上的链接不能用作链接。如果我在myLink 上设置了背景色，它也可以。

我是在吸毒还是正常行为？以及如何使用透明背景解决此问题？

【问题讨论】：

您这样做的具体原因有哪些？认为这是预期的行为，因为“myLink”本质上是空的。
我在图像上链接一个“区域”...
+1 @Mario 你应该使用图像映射。
图片地图在手机上有些问题...
另外，“链接”通过 SEO 获得更多积分...

标签： html css internet-explorer

【解决方案1】：

尝试将这些行添加到.myLink：

background-color:#ff0000;
filter: alpha(opacity=0);

编辑

如果.myBox 中只有一张图片，如果将图片作为背景图片添加到.myBox，.myLink 将按预期工作。

【讨论】：

使用过滤器不是永久的解决方案，因为微软将在 IE10 中放弃对它们的支持。
我觉得你有点偏见，而且我不太理解这种态度（不是个人的）。如果您要为页面添加额外代码以在特定产品线（此处：IE）中工作，我会特别尝试确保最新版本也能正常工作（比任何其他旧版本更有效），无论有多少问题已解决或仍未解决：它是最新版本，它的市场份额肯定会上升 - 而不是下降。现在放弃 IE6 甚至 IE7 没什么不好，但不要忽视 IE9 或 IE10。不确定 IE10 如何处理“空”链接，所以如果整个主题不适用于 IE10...
@Mario 对不起，我无意以任何方式存在偏见。但是，这个 OP 的问题也困扰着 IE9，并且可以通过我回答的两种方式来解决。我不只是猜测 IE10 的修复，因为我还没有测试过它，也许它甚至不会有问题。如果有，修复几乎不会与旧版 IE 竞争。
没问题。只是听起来有点像“IE10 无论如何都会是垃圾，所以请忽略它”。