似乎一些相当新版本的Safari不支持< main>
HTML5元素. (我已经在Snow Leopard上测试了Safari 5.1.9,到目前为止在IOS 4上运行了移动Safari).有没有办法让Safari识别< main>元素(像一个shiv)？
我把下面的一些示例代码放在一起.在受影响的Safari版本中查看绿色< main>框没有出现,如果我要添加更多文本,它将流出< main>元素就好像它甚至不存在一样.
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;
}
解决方法
大多数浏览器显示未知元素,就好像它们是显示的一样：默认情况下是内联的,所以在某个地方弹出这个CSS应该这样做：
main {
display: block;
}
例如.
main {
display: block;
width: 800px;
height: 800px;
background-color: #0C0;
}
> http://jsfiddle.net/PeF8u/ – 绿色区域不可见
> http://jsfiddle.net/PeF8u/1/ – 绿色区域可见
(我在Mountain Lion上的Safari 6.0.5中测试过.)
Sitepoint对< main>进行了很好的记录.元素：http://www.sitepoint.com/html5-main-element/
还有一个很好的Stack Overflow答案,它以一般方式描述了如何在旧版浏览器中使用新的HTML5元素(对于某些“工作”的定义)：https://stackoverflow.com/a/13949253/20578
