浏览器模式与文档模式区别

浏览器模式与⽂档模式区别

浏览器模式下的影响：

简单来说，“浏览器模式”影响的是浏览器的版本及IE的条件注释，

”浏览器模式”会影响服务器端对浏览器版本的判断，主要表现在展现，对CSS影响很⼤

先看看以下的代码：

<!–[if IE 7]>

.content{color:#F00;}

</style>

<![endif]–>

<div class=”content”>”浏览器模式”为IE7的情况下，字体颜⾊为红⾊，其他情况为⿊⾊。</div>

这是⼀段⾮常简单的IE条件注释代码，在IE7下字体的颜⾊会被解析为红⾊，此时我们切换浏览器模式并保持⽂档模式不变，效果如图：

可见，切换”浏览器模式”，对IE的条件注释会有影响。

另外，”浏览器模式”对服务器端获得浏览器版本好也会有影响，看下⾯的代码：

alert(navigator.appVersion);

</script>

这是⾮常简单的⼀段JS代码，作⽤是输出浏览器的版本信息，⽤于检测浏览器的版本，在不同浏览器模式下效果如图：

ie9浏览器手机版可见，不同的浏览器模式导致了JS中appVersion的值的不同，即浏览器的版本信息发⽣了变化。

“浏览器模式”中还有另外⼀个模式——兼容性视图，在测试中发现，当把浏览器模式切换为改模式后，IE7注释可触发，JS显⽰的版本号也为IE7，有兴趣的同学可以⾃⾏测试，此处不再累述。

浏览器模式下的影响：

”⽂档模式”影响的是IE的排版引擎，对DOM的渲染会产⽣影响，下⾯通过例⼦来看看到底有哪些影响，⾸先还是看代码：

.content{#color:#F00;}

</style>

<div class=”content”>⽂档模式为IE7的情况下，字体颜⾊为红⾊，其他情况为⿊⾊。</div>

这⾥⽤到了HACK，在IE6、7下，⽂字的字体应为红⾊，其他浏览器为默认的⿊⾊字，保持浏览器模式不变的情况下，切换⽂档模式，效果如图：

可见，“⽂档模式”对CSS hack产⽣了影响，也就是说，“⽂档模式”的切换会直接影响到页⾯的渲染，即之前所说的Trident引擎，这也就是为什么IE的Quirks模式是在 “⽂档模式”中切换⽽⾮在“浏览器模式”中切换的原因（Quirks模式中的盒模型的解析与标准不同）。

再来看看以下的⼀段代码：

周所周知，这段代码的作⽤是令IE8+的浏览器以IE7的模式来渲染页⾯，以期达到向前兼容的⽬的，当我们在页⾯中加⼊这段代码后，浏览⽹页，出现的效果如图（IE9浏览器）：

浏览器的默认⽂档模式被设置为IE7或IE8，渲染模式也以IE7或IE8的模式进⾏渲染，也就是说，在页⾯中插⼊

这段声明会直接影响到⽂档模式，当然，此处⽤户可⼿动切换⽂档模式，这么做可以让⼀些不兼容新版IE的页⾯在加⼊此段声明后能够更好地在新版IE 浏览器中被浏览。