注释在IE中引发的bug

这几天帮朋友看了一道笔试题，然后将自己的思路写在了<！doctype>标签之前，然后就测试了下兼容性。在FF，chrome中都没有问题，但是在IE6,7中，发现页面的居中没了，写入的JS函数执行不对了。

通过查阅资料，发现了其中的道道儿~

首先呢出现这个问题的原因是出发了IE的Quirks mode（怪异模式）。

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。怪异模式下除了我遇到的margin-left：auto；margin-right：auto；的元素不能居中显示，还有以下一些不同：

1. 内联元素，例如<a>|<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
2. 内联元素（display: inline）内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a|em|span等都为内联元素。内联元素可以为任何其他元素的子元素。
3. 浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。
4. 如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0% ，因此不会被显示，此点在采取层布局的时候需特别注意。
5. 边界值可为负，其显示效果各浏览器可能不相同。
6. 填充值不可为负。
7. 边框默认的样式（border-style）为不显示（none）。

我只查到这么多，如果各位有更详细的阐述，希望您能赐教。

那么如何触发这个模式呢？

IE6的触发在XHTML的DOCTYPE前加入XML声明 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE7的触发在XML声明和XHTML的DOCTYPE之间加入HTML注释
<?xml version="1.0" encoding="utf-8"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
IE6和IE7都可以触发的在HTML4.01的DOCTYPE文档头部加入HTML注释
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

但是我就是想在<doctype>前加注释怎么办？

<![if !IE]><![endif]>

<![if false]><![endif]>

就到这吧，欢迎大家赐教~~

posted on 2013-05-17 14:36 happycloud~~ 阅读(393) 评论(0) 编辑收藏举报