WP-Mix

For the DigWP redesign, I noticed that some linked images were displayed with an unwanted border (or outline) in IE. After the usual CSS techniques failed to work, I experimented a bit and discovered a simple solution.

Update: this method works for IE 9 and IE 10 for sure, probably other versions.

Here is a screenshot of the linked image in question.

I thought this was odd because the border didn’t appear in Chrome, Firefox, or Opera — only Internet Explorer 9. So I wrote it off as another weird IE bug and tried the usual fixes for removing borders and outlines:

a.link, a.link img { border: none; outline: none; }

While this seems to work great on most browsers, it wasn’t working with IE9. So after some experimenting, I discovered that the orange outline/border was somehow due to declaring a color:orange for links, even though there was no padding or margin affecting the area. Finally, this did the trick:

a.link { color: transparent; }

That snippet removed the unwanted borders/outlines on linked images in IE9. Of course, you’ll need to change the a.link selector to match whichever link(s) you are targeting. Here is the same linked image without the funky IE border thing.

Nice and clean. Only sucks that it requires adding an otherwise superfluous property just to deal with IE. So if you would rather not soil your pristine stylesheet, another option would be to load some conditional CSS for IE only, or even via splash of jQuery:

$('a:has(img)').css('color','transparent');

That’s a sweet little nugget right there. And if the color fix is still not working, check to see if any background-color is applied.. if so, try the same general strategy but for background-color:

a.link { background-color: transparent; }

Thanks, IE, for making our lives just a little more challenging than necessary.