Internet Explorer Div a/link click not working

Glenn Glenn's Blog Leave a Comment

Internet Explorer is the bane of any web developer especially as older versions continue to be used worldwide.

My Div link in IE isn’t Clickable

A rather annoying bug is found in clickable divs (using absolute full size link) on IE 10 and below that renders them useless unless they have a background colour. One proposed solution to this is to add a transparent div in the a / link element, but for us that’s just adding unnecessary load to the page. We much prefer to keep the background colour, but simply make it transparent. The following should work a treat:-

<div class="clickable-div"><a href="#yourlink"></a></div>
.clickable-div {
display: relative;
}
.clickable-div a {
background: white;
filter: alpha(opacity=0); opacity: 0; // fix IE background click issues
cursor: pointer;
width: 100%;
height: 100%;
display: inline-block;
}
About the Author
Internet Explorer Div a/link click not working Internet Explorer Div a/link click not working 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.