Google Chrome的低容错性不允许我们笔误_谷歌低版本兼容 .homecontainer {.twohometop {}}写法吗-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangdi/article/details/3033010

本文通过一组HTML代码在不同浏览器（Firefox, Google Chrome, IE8, Opera）中的渲染效果对比，揭示了浏览器之间的渲染差异，特别是Google Chrome对于未正确闭合标签的独特处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来对比四张截图：
1) Firefox:

2) Google Chrome:

3) IE8 beta2:

4) Opera 9.52:

这三个截图是4个不同的浏览器（Firefox3.0.3，Google Chrome 0.2.153.1，IE8 beta2，Opera 9.52）对于同一段HTML代码的渲染结果。可以看到，Google Chrome的渲染结果与其他三个有明显的不同。在最后一组出现了阶梯状的缩进。看了代码，可能所有人就会明白了：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" /> 
<style type="text/css">
body {
    font-family: SimSun, Tahoma, sans-serif;
}

.test {
    margin-left: 20px;
}
</style>
</head>
<body>
<ol>
    <li><div>第一个DIV</div></li>
    <li><div>第二个DIV</div></li>
</ol>
<hr>
<ol>
    <li><div class="test">第一个DIV</div></li>
    <li><div class="test">第二个DIV</div></li>
</ol>
<hr>
<ol>
    <li><div class="test">第一个DIV</li>
    <li><div class="test">第二个DIV</div></li>
</ol>
</body>
</html>

最后一组列表我故意漏写了一个</div>，Google Chrome认为当前的DIV没有封闭（即使看到了li的封闭标签</li>），所以把下一个li便签画在了当前DIV之中。结果导致了阶梯状的缩进。而其他三个浏览器都默默的认为在见到</li>标签的时候，没有</div>，是一个笔误，悄悄地替开发人员补上了。所以渲染结果是“正确”的。

不知道这种低容错性是Google Chrome的原则，还是因为它还没有成熟到其他三个浏览器的程度导致的。这确实是一对矛盾，我们希望所有的浏览器都遵循W3C标准，但又不希望原来写的页面突然有一天面目全非。（DOCTYPE是一种解决方案，不过这个问题似乎与DOCTYPE无关）

另外，还可以看到IE8和其他三个浏览器的渲染策略上的不同，其他三个在画列表的时候，都是在列表的序号后面进行缩进，只有IE8是把序号一起缩进了。充分说明了，IE8仍然非常有个性。