HY8006: 各浏览器对未闭合标签的容错方式不同

作者:孙东国

标准参考

无。

问题描述

对于代码中的笔误造成的标签未闭合现象,各浏览器都会尝试修复,并在它们认为合理的位置加入闭合标签。但各浏览器的做法是不同的。

造成的影响

该问题将造成页面布局在各浏览器下有明显差异。

受影响的浏览器

所有浏览器  

问题分析

对于可能发生在 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>
  • 从以上代码的意图来看,作者构造了一个 UL > LI > DIV 的嵌套结构。
  • DIV 元素需要闭合标签,但被遗失了。

浏览器会修复以上代码的错误,这段代码在不同的浏览器环境中的表现:

IE Firefox Opera Chrome Safari
snapshot snapshot

可以看出,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 未闭合 标签