Odd IE8 PNG problem 4/10/13

When building this site, I came across an interesting issue in IE8. My PNG logo wouldn’t load. Strangely, the PNG file loaded fine in IE7 and IE9. The internet is filled with complaints about IE8¹ and PNGs, but none of the fixes I tried helped.

My solution – for now – is to hide the logo image for old IE versions, and present the logo as plain text using the CSS content property:

<a href="/" class="logo" data-content="Chris Johnson">
  <img src="/img/logo@2x.png" width="330" alt="Chris Johnson">
</a>

/* Use your favorite method to restrict these styles to IE8 */
.logo img { display: none; } 
.logo:before { content:attr(data-content); }

If you’ve ever come across this IE8 problem before and know how to make the PNG load, please let me know.