无。
对于代码中的笔误造成的标签未闭合现象,各浏览器都会尝试修复,并在它们认为合理的位置加入闭合标签。但各浏览器的做法是不同的。
该问题将造成页面布局在各浏览器下有明显差异。
所有浏览器 |
---|
对于可能发生在 HTML 代码中的错误,各浏览器都会尝试修复。
分析以下代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> ul {margin:0; padding:0; width:200px; height:100px; list-style:none; background:silver;} li {float:left;} </style> </head> <body> <ul> <li> <div style="width:100px; height:100px; background:red;"> </li> <li> <div style="width:80px; height:80px; background:blue;"> </li> </ul> </body> </html>
浏览器会修复以上代码的错误,这段代码在不同的浏览器环境中的表现:
IE Firefox Opera | Chrome Safari |
---|---|
![]() |
![]() |
可以看出,DIV 元素可以被正常渲染,但他们的位置有区别。
IE Firefox Opera 的修复方式:
<ul> <li> <div style="width:100px; height:100px; background:red;"> </div>1</li> <li> <div style="width:80px; height:80px; background:blue;"> </div>1</li> </ul>
注:
1. 浏览器添加了 DIV 的闭合标签。
Chrome Safari 的修复方式:
<ul> <li> <div style="width:100px; height:100px; background:red;"> </li>1 <li> <div style="width:80px; height:80px; background:blue;"> </li>1 </div></li></div></li>2</ul>
注:
1. 浏览器删除了 LI 的闭合标签。
2. 浏览器添加了缺失的标签。
可见:各浏览器都按照自己的方式修复了错误的 HTML 代码,而如何修复是“正确的”则没有标准答案,这将造成文档的结构在各浏览器中出现差异。
编写代码时要注意,不要遗失应有的闭合标签,以确保在各浏览器中都能按照预期的文档结构来渲染页面。
操作系统版本: | Windows 7 Ultimate build 7600 |
---|---|
浏览器版本: |
IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4 Opera 10.50 |
测试页面: | unclosed_tag.html |
本文更新时间: | 2010-07-02 |
unclosed tag 未闭合 标签