IE8 is adding a trailing slash to an HTML5 <main> tag

Question

My site is a Drupal 7 installation. Basically the <main> tag is at some point become <main/>, and this breaks the site's layout in those browsers. Everything is up to date. I am using a SquareGrid-based theme.

This problem used to affect even more HTML5 elements in IE8 and lower, but then I installed the Respond.js module, which fixed the majority.

You can see the problem in IE8 at http://www.shototechnologies.com/content/shotolab-channel-setup-page

Thank you very much!

Answer 1

That's because IE8 doesn't support HTML5 elements. And because it doesn't understand the <main> element as a valid HTML element, it auto closes it.

You will either need to use an HTML5 shim for IE<9 or wrap the tag in a div with class="main" as a fallback.