Menu
It appears as though some fairly recent versions of Safari don't support the <main> HTML5 element. (I have tested Safari 5.1.9 on Snow Leopard, and mobile Safari running on IOS 4 thus far). Is there a way to get Safari to recognize the <main> element (like a shiv)?
I have thrown together some example code below. When viewed in an affected version of Safari the green <main> box does not appear, if I were to add more text it would flow outside of the <main> element as if it were not even there.
HTML:
<body>
<main>
<nav id="bar"></nav>
<p>Lorem Ipsum</p>
</main>
</body>
CSS:
main{
width:800px;
height:800px;
background-color:#0C0;
}
#bar{
width:300px;
height:400px;
float:left;
background-color:#09F;
}
459
Most browsers display unknown elements as if they were display:inline by default, so popping this CSS in somewhere should do it:
main {
display: block;
}
E.g.
main {
display: block;
width: 800px;
height: 800px;
background-color: #0C0;
}
(I tested in Safari 6.0.5 on Mountain Lion.)
Sitepoint have a good write-up of the <main> element: http://www.sitepoint.com/html5-main-element/
There’s also a great Stack Overflow answer that describes in a general way how to get new HTML5 elements working (for some definition of “working”) in older browsers: https://stackoverflow.com/a/13949253/20578
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
