html - IE渲染背景:transparent as a hole?

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");

.

修改后的 fiddle(在 IE9、IE8、IE7 的 IE9 标准模式下测试:

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