我是否需要设置节标签的样式以实现向后兼容?

时间:2013-04-07 16:53:05

标签: css html5

我正试图加入HTML5,现在它已经获得了更多的报道并且是一个成熟的规范。


而不是使用div标签:

<div class="page-item">
    <h2>Google rumored to purchase WhatsApp for $1 Billion dollars.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        in felis nisi, quis vulputate odio. Proin eu est dolor, non 
        feugiat dui. Cras tristique, arcu nec adipiscing varius, nibh 
        dolor fermentum nibh, in elementum justo dolor et enim. Nullam 
        libero dui, tristique ut pulvinar at, consequat malesuada nisl. 
        Vestibulum sed elit purus, id posuere neque. Pellentesque luctus 
        libero quis risus ullamcorper sollicitudin. Pellentesque dictum, 
        est et blandit placerat, mi erat tempus diam, et aliquet ipsum felis 
        sit amet risus. Proin pretium accumsan tincidunt. Pellentesque vel 
        tortor lacus, sit amet aliquam mi. Donec tincidunt ullamcorper 
        molestie.</p>
</div>

我想使用section代码:

<section>
    <h2>Google rumored to purchase WhatsApp for $1 Billion dollars.</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi 
        in felis nisi, quis vulputate odio. Proin eu est dolor, non 
        feugiat dui. Cras tristique, arcu nec adipiscing varius, nibh 
        dolor fermentum nibh, in elementum justo dolor et enim. Nullam 
        libero dui, tristique ut pulvinar at, consequat malesuada nisl. 
        Vestibulum sed elit purus, id posuere neque. Pellentesque luctus 
        libero quis risus ullamcorper sollicitudin. Pellentesque dictum, 
        est et blandit placerat, mi erat tempus diam, et aliquet ipsum felis 
        sit amet risus. Proin pretium accumsan tincidunt. Pellentesque vel 
        tortor lacus, sit amet aliquam mi. Donec tincidunt ullamcorper 
        molestie.</p>
</section>

我需要应用哪种样式才能使这个section标记尽可能适用于旧版浏览器? ( IE7以后

2 个答案:

答案 0 :(得分:1)

首先我认为你应该使用<h1>作为<section>的第一个标题,尽管有人可以纠正我。

IE8-根本不支持这些标记,并会忽略与它们相关的任何样式。有两个相当简单的解决方案。一个是添加

document.createElement('section');

出现<section>元素之前。然后,IE出于某种原因应用样式。有很多HTML5填充/ shivs可以为所有新元素执行此操作。

如果你不能依赖JS或者由于某些原因不想这样做,你可以随时保留<div>样式,并保持<section>语义。拥有<div>并没有什么坏处,因为它除了分组元素之外没有语义含义,<section>也是如此。

答案 1 :(得分:0)

就造型而言,即CSS而言,您只需要对特定HTML5元素进行基本重置,如下所示:section{display: block;}

但是,为了让老浏览器(例如IE7)能够将新元素实际识别为元素,您需要将它们注册为这样。通过Javascript,在页面的document.createElement("section");中的脚本声明中添加<head>,简单,简单,当然也可以这样做。

上面的所有内容都可以作为HTML5 Starter Pack的一部分找到,这有助于开发人员启动他们的HTML5项目。

干杯!