Internet Explorer Effing Eleven

September 8th, 2017 by

I can only assume that if you’re using Internet Explorer at this point, it’s because someone is forcing you to do so by holding a gun to your head.

That being said, I’ve spent a fair amount of time making adjustments to the site to compensate for IE11’s shortcomings. If you’re using a version older than that, I have nothing for you but belabored sighs and eye rolls.

So IE11 supports SVG (yay!) but handles the resizing of those elements in a way contrary to W3C standards or anything resembling common sense (boo!). In some instances I’ve had to resort to the “padding-bottom percentage” trick where you create a containing DIV for your SVG graphic, set the width of that div to 100% and height to zero, then add “padding-bottom:x%” in CSS where the X is the aspect ratio of the contained SVG element. The SVG element then gets positioned absolutely to the upper right corner of the container with a width and/or height of the element set to 100% also. It sounds complicated because it is, but at least it works in both IE and Chrome.

Surely more IE problems will crop up as I continue to develop the site, but for now I think I have the major ones resolved.