Question

This is my 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;    
}

both link with transparent and red background should be "linked".

But in fact, on IE (every version I try: 7,8,9) the link is "broken", such as a "hole" to the text above the link.

Why? And how can I fix this?

Answer 1

1 . The behaviour is not exactly as you expect originally due to Normalized CSS option set in JsFiddle by default (look at the left under JS frameworks choice and so). Lets remove it to guarantee we own all styles.

2 . However, just unchecking that won’t fix it completely. You’ll be able to sense it on the top left taking small width and height.

To fix the width, you need to set display:block;

3 . To fix the height, you need to set actual height. For example height: 35px;.

4 . After all this, you’ll find the link is clickable only in areas that’s not text, because the browser knows it’s transparent, it thinks it’s click-through also.

This behaviour is described here: http://haslayout.net/css/No-Transparency-Click-Bug

You need to apply the below fix (copied from article, just changed filename):

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

.

The modified fiddle (tested in IE9 standards modes for IE9, IE8, IE7:

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