IE11 main element display: block; not supported

Posted on: July 23rd, 2015 by BuildMyWeb No Comments

Internet Explorer is The Suck

Lord, I hate Internet Explorer. I’ve heard,.. well really read this so many times before from other developers, I cannot bare to say it again. But I will. I hate Internet Explorer. I’ve been developing sites since before IE6. And man alive, was THAT a beast. The worst browser ever conceived by man. But that’s for another time. Just take my word for it if you haven’t already formed your own opinions on the matter, when it comes to browsers, IE is the suck.

Inline Elements Do Not Render Vertical Padding

I recently was developing a site in HTML5 and had an issue where a background image on my main element was not rendering in IE11. It was fine in Firefox and Chrome, but f*cking IE11 would not do it’s job. That is what caught my attention. But then I noticed it wasn’t accommodating the vertical padding I coded either. So I put on my thinking cap and pondered, ‘What would cause a primary block element such as main not to have padding?’ And then it hit me. I heard my inner voice say ‘block’ and I thought, ‘well an inline element wouldn’t take padding.’

Solution for Main Element Display

So on a whim I applied display:block; in my CSS to the main element and wouldn’t you know it! It worked. My background image appeared and the padding was accommodated. So I did a quick little search and it turns out there are plenty of complaints and questions about this. Is it a bug? Makes sense to me as IE has always been and likely always will be a piece of shit. Apparently IE11 is missing a User Agent Style for the

element.

Tags: , , ,

Leave a Reply