浏览器模式和文档模式

          问题：今天遇到一个问题，其实与今天的主题不是很相符，不过因为自己是通过文档模式调试出来的，所以就学习一下浏览器的文档那个模式，问题是用iframe载入一个远程页面，结果页面的样式部分显示部分不显示，怎么找都找不到原因，原始页面是正确的，结果嵌入到我的页面里就不正确了，样式也都引入了，然后无聊之际就调试一下浏览器的文档模式，看看是不是有兼容的问题，结果一调，哇哈，大问题出来 了，我从IE7调到IE9，从IE9在调回IE7，结果正确啦，同样是IE7模式下，在本页刷 新就不行，结果换一个文档模式，无论是什么模式，就可以了，于是就问QQ群里的高 手，说改服务器配置，不会，结果想想如果是文档模式引起的，那么就学习学习文档模式。

<!--[if !supportLists]-->1、<!--[endif]-->浏览器模式与文档模式

在较新的IE浏览器中（如IE8，IE9,IE10）为了兼容性的问题，引入了浏览器模式和文档模式两个概念，浏览网页时可以通过按F12键看到这两种模式。

※浏览器模式的主要作用是：为兼容较早版本的IE，它会控制浏览器发出的UserAgent，表示以哪个版本的浏览器发出请求，以此来允许为某个特定的IE版本设计代码正确执行（举例来说，有些代码真是判断ie版本的，还有css也有判断ie版本的）【浏览器模式影响IE的条件注释和js获取版本信息】

IE的条件注释

<!–[if IE 7]>
<style type=”text/css”>
.content{color:#F00;}
</style>
<![endif]–>
<div class=”content”>”浏览器模式”为IE7的情况下，字体颜色为红色，其他情况为黑色。</div>

                    浏览器的版本信息

<script type=”text/javascript”>
alert(navigator.appVersion);
</script>

※文档模式的主要作用是影响显示网页HTML的方式，在接到HTML文件后，决定哪个IE版本的文档模式解析该页面（举例来说，JS脚本就依赖文档模式，IE9的js变化就需要IE9文档模式来支持【就是因为这个的原因，我才看看是不是我的js出了问题，结果真的是js出问题了。】）。（影响的是IE的排版引擎，对DOM的渲染会产生影响）例子：

【文档模式”对CSS hack产生了影响】

<style type=”text/css”>
.content{#color:#F00;}
</style>
<div class=”content”>文档模式为IE7的情况下，字体颜色为红色，其他情况为黑色。</div>

这里用到了HACK，在IE6、7下，文字的字体应为红色，其他浏览器为默认的黑色字，保持浏览器模式不变的情况下，切换文档模式，IE7文档模式下为红色。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

设置为IE7文档模式下

 

评论

1 楼 aniyo 2012-09-10  

没有见过这问题，只用过F12断点这些的，嘎嘎