HTML

Question

这是我的code：

HTML

<div class="myDiv">text under link!</div>        
<a class="myLinkTransparent" href="#">&nbsp;</a>    
<a class="myLinkRed" href="#">&nbsp;</a>

CSS

.myDiv
{
    position:relative; 
    z-index:40; 
    width:310px;
}

.myLinkTransparent
{
    z-index:50; 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100px;  
    text-decoration:none;
    background-color:transparent;    
}

.myLinkRed
{
    z-index:50; 
    position:absolute; 
    top:0px; 
    left:100px; 
    width:100px;  
    text-decoration:none;
    background-color:red;    
}

透明和红色背景的链接都应该“链接”。

但实际上，在IE上（我尝试的每个版本：7,8,9）链接都是“破损”，例如链接上方文本的“洞”。

为什么呢？我该如何解决这个问题？

Answer 1

1。由于默认情况下在JsFiddle中设置了Normalized CSS选项，因此行为并不完全如您所期望的那样（请参阅JS框架选项左侧的左侧）。让我们删除它以保证我们拥有所有样式。

2。但是，只需取消选中即可完全解决问题。你可以在左上角看到它的宽度和高度。

要修正宽度，您需要设置display:block;

3。要固定高度，您需要设置实际高度。例如height: 35px;。

4。毕竟，你会发现链接只能在不是文本的区域中点击，因为浏览器知道它是透明的，它也认为它是点击式的。

此处描述了此行为：http://haslayout.net/css/No-Transparency-Click-Bug

您需要应用以下修复程序（从文章复制，只需更改文件名）：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="non-existing-or-so.png",sizingMethod="scale");

修改后的小提琴（在IE9，IE8，IE7的IE9标准模式下测试：

http://jsfiddle.net/Meligy/PPdbc/11/

Answer 2

不确定，但可能是个错误。

您可以尝试下面的解决方法

在myLinkTransparent类中将 background-color 设置为绿色
然后通过在myLinkTransparent类中设置 filter：alpha（opacity = 0）;
将不透明度设置为零
.myLinkTransparent { 的z-index：50; 位置：绝对的; 顶：0像素; 左：0像素; 宽度：100像素; 文字修饰：无; 背景色：绿色; 滤波器：α（不透明度= 0）;
}

IE渲染背景：透明如洞？

HTML

CSS

2 个答案: