这是我code：IE渲染背景：透明的洞？

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）链接是“破”，如链接上方的文本“洞”。

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

来源

2012-02-20 markzzz

我不知道你的_hole_的意思，但对我来说，在FF看起来完全一样，Chrome浏览器，IE8 + ... – elclanrs 2012-02-20 08:14:14

如果你将光标放在文本上（实际上是在透明背景的第一个链接上面），你可以将它看作“链接”（你不能点击它）你知道什么吗？我的意思是？ – markzzz 2012-02-20 08:21:36

当然，这在IE上！在其他浏览器上一切正常... – markzzz 2012-02-20 08:26:08

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标准模式下为IE9，IE8，IE7测试：

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

来源

2012-02-20 09:39:48 Meligy

找到另一个智能解决方案：只需添加一个背景图片：url（../ private_images/trasparenza_input.png）; ，1x1像素透明！因此，IE“了解”，有一些“背景”，问题是固定的:) – markzzz 2012-02-21 16:27:53

如果你想采取这是另一条路线。只关注要点问题，但确定你可以有一个gif透明图像或其他任何替代方案。 – Meligy 2012-02-21 21:58:56

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

可以尝试下面

变通方法设置背景颜色作为绿色myLinkTransparent类
然后，只需通过设定滤波器中设定不透明度为零：α（不透明度= 0）; in myLinkTransparent类

.myLinkTransparent z-index：50; { z-index：50; position：absolute; top：0px; left：0px; width：100px; text-decoration：none; background-color：green; filter：alpha（opacity = 0）;
}

来源

2012-02-20 08:50:54 Somnath

IE渲染背景：透明的洞？

HTML

CSS

回答

相关问题