看了文章Using HTML5 semantic elements today，做了一点翻译
原文地址：[url]http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nczonline+%28NCZOnline+-+The+Official+Web+Site+of+Nicholas+C.+Zakas%29&utm_content=Google+Reader[/url]
现在使用html5标签对于不同的浏览器大致会遇到[color=red]三个不同的问题[/color][size=large][/size]：
（1）HTML5标签被认为是错误的，然后被完全忽略，创建DOM的时候就不管HTML5标签
（2）HTML5标签被认为是错误的但是DOM节点也会创建，只是用占位符来表示。比如section也会在DOM中被创建，但是没有任何的样式style
（3）HTML5标签被识别并且创建了DOM节点（在大多数例子中，都被看做是block元素）。
例如：
在浏览器：Firefox 3.6和Safai 4 中认为div有一个不知道的子元素section，section被作为inline元素在dom中创建。h1 和 p元素作为section的子 元素。因为section在DOM中，所以给他定义style是可以的。
在IE中，认为section是错误的，所以section被忽略了，h1和p作为div的子元素。就相当于：
[color=red][size=large]解决的方法大概有三种：[/size][/color]
1、JavaScript shims
在IE中，如果是在js中用document.createElement()动态创建元素,浏览器就会认识这个元素并且允许样式。
shims技术就是利用这种方法，在js中创建元素，比如document.createElement("section"),确保HTML5的元素能够被正确的识别。同时，shims技术还设置HTML5的元素的display:block，以确保其他浏览器也能正确的渲染。
原文作者不喜欢这种方式，因为它打破了一个web应用的原则：JavaScript不应用依赖于布局。这个原则主要是为了让web应用的代码能更好的管理。
2、Namaspace hack
IE浏览器的另外一种识别不支持的元素的方法。用XML格式的名称空间，在元素前面带上名称空间的前缀，例如：
html5这个前缀只是一种，并不是官方的，你也可以采用其他的前缀，比如"foo".
在写样式的时候：
这也不是我喜欢的方法，因为我不喜欢在文件中看到满篇的名字空间元素。
3、"Bulletproof" technique
我第一次接触到这种技术是在YUIConf2010上，Tantek Çelik的发言。Tantek建议在html5的块元素里面使用div，然后在div中使用html5元素标签作为class属性。例如：
这种方法确保了文档流能够被正常的渲染。在HTML5的块元素中使用块元素在不同浏览器中的不同解释：
(1)一个简单的块元素（<ie9）
(2)一个位于inline元素中的块元素(ff3.6 safai 4等)
(3)一个位于块元素中的块元素(ie9, ff4,safari 5等)
所有上面的三种情况都会被正常渲染。
Tantek指出的唯一一个例外的情况，就是hgroup,建议的写法是:
样式的写法：
以上三种都不是完美的方法，不过作者还是比较喜欢用bulletproof方法。
原文地址：[url]http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nczonline+%28NCZOnline+-+The+Official+Web+Site+of+Nicholas+C.+Zakas%29&utm_content=Google+Reader[/url]
现在使用html5标签对于不同的浏览器大致会遇到[color=red]三个不同的问题[/color][size=large][/size]：
（1）HTML5标签被认为是错误的，然后被完全忽略，创建DOM的时候就不管HTML5标签
（2）HTML5标签被认为是错误的但是DOM节点也会创建，只是用占位符来表示。比如section也会在DOM中被创建，但是没有任何的样式style
（3）HTML5标签被识别并且创建了DOM节点（在大多数例子中，都被看做是block元素）。
例如：
<div class="outer">
<section>
<h1>title</h1>
<p>text</p>
</section>
</div>
在浏览器：Firefox 3.6和Safai 4 中认为div有一个不知道的子元素section，section被作为inline元素在dom中创建。h1 和 p元素作为section的子 元素。因为section在DOM中，所以给他定义style是可以的。
在IE中，认为section是错误的，所以section被忽略了，h1和p作为div的子元素。就相当于：
<div class="outer">
<h1>title</h1>
<p>text</p>
</div>
[color=red][size=large]解决的方法大概有三种：[/size][/color]
1、JavaScript shims
在IE中，如果是在js中用document.createElement()动态创建元素,浏览器就会认识这个元素并且允许样式。
shims技术就是利用这种方法，在js中创建元素，比如document.createElement("section"),确保HTML5的元素能够被正确的识别。同时，shims技术还设置HTML5的元素的display:block，以确保其他浏览器也能正确的渲染。
原文作者不喜欢这种方式，因为它打破了一个web应用的原则：JavaScript不应用依赖于布局。这个原则主要是为了让web应用的代码能更好的管理。
2、Namaspace hack
IE浏览器的另外一种识别不支持的元素的方法。用XML格式的名称空间，在元素前面带上名称空间的前缀，例如：
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<body>
<html5:section>
<!-- content -->
</html5:section>
</body>
</html>html5这个前缀只是一种，并不是官方的，你也可以采用其他的前缀，比如"foo".
在写样式的时候：
html5\:section {
display: block;
}
这也不是我喜欢的方法，因为我不喜欢在文件中看到满篇的名字空间元素。
3、"Bulletproof" technique
我第一次接触到这种技术是在YUIConf2010上，Tantek Çelik的发言。Tantek建议在html5的块元素里面使用div，然后在div中使用html5元素标签作为class属性。例如：
<section><div class="section">
<!-- content -->
</div></section>
这种方法确保了文档流能够被正常的渲染。在HTML5的块元素中使用块元素在不同浏览器中的不同解释：
(1)一个简单的块元素（<ie9）
(2)一个位于inline元素中的块元素(ff3.6 safai 4等)
(3)一个位于块元素中的块元素(ie9, ff4,safari 5等)
所有上面的三种情况都会被正常渲染。
Tantek指出的唯一一个例外的情况，就是hgroup,建议的写法是:
<div class="hgroup"><hgroup>
<!-- content -->
</hgroup></div>
样式的写法：
.section {
color: blue;
}
以上三种都不是完美的方法，不过作者还是比较喜欢用bulletproof方法。
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
