关于IE9文本模式切换的简单测试

和IE8一样，IE9 Dev Tools提供了文本模式切换功能，协助开发人员测试网站在IE7/IE8/IE9下的呈现结果，共有两组切换选项: Browser Mode(浏览器模式)及Document Mode(文本模式)。补充: IE官方博客有篇详细的介绍：IE浏览器渲染模式与文本模式测试网站。 简单来说，切换浏览器模式会改变IE9发送给Web Server的User Agent字串，网站程序常会依据浏览器送出的User Agent资讯来判别浏览器版本，针对不同浏览器传回不用的特制网页。换句话说，切换浏览器模式可以让IE9伪装自己是IE7或IE8(按下兼容性检测按钮亦有类似效果)，模拟使用IE7/IE8检测网站的结果；（相关阅读：修改浏览器的User-Agent来伪装你的浏览器和操作系统）而文本模式，则可要求IE切换不同的显示引擎产生HTML内容，以测试网站在不同IE版本的呈现效果。 听起来有点模糊，所以我写了一个测试范例来玩玩:

<%@ Page Language="C#" %>

User Agent: <%=Request.UserAgent%>

Time: <%=DateTime.Now.ToString("HH:mm:ss")%>

在以上的HTML中，我加了一些只有IE9才看得到的效果(border-radius CSS、sytle.opacity)、一些IE8以上版本才看得到的效果(:before CSS, window.JSON)和一些IE7以上版本才看得到的效果(:first-child CSS, style.maxWidth)，借着切换文本模式检测不同的呈现结果: (最下方的DateTime.Now用来观察IE9是否重新由网站读取网页，实验结果每次切换浏览器模式或文本模式都会触发重新整理)

1. 先切到最原始的Quirks模式，在IE6下差不多看到的就是这样子，但有一点差距: 在IE6，typeof document.body.style.maxWidth会传回undefined，但IE9切Qurik模式下仍可使用这个IE7起才存在的属性。依此而论，IE9/IE8在Quirks模式下DOM及Script引擎模拟的是"比IE7还原始的浏览器版本"，并不等同于IE6。

   

2. IE7标准模式，:first-child生效，第一个div出现黄底。

   

3. IE8标准模式，:before生效，User Agent前方出现四个星，而window.JSON也存在了。

   

4. IE9标准模式，圆角出现咯~ 而style.opacity透明度也能用了。

   

5. 试着切换浏览器模式，我们可以看到User Agent的改变，这会影响网站判定的浏览器版本预设的文本模式(但如果网页从头到尾就只有一个版本，那就没差)，但浏览器模式与文本模式间并没有绑死。例如: 即便浏览器模式为IE7，我们仍然可以将文本模式设为IE9秀出圆角来。

   

6. 在文本模式中，会有一个选项被标为默认值，代表IE依据HTTP Header、、X-UA-Compatible meta所判别的文本模式。例如: 我们可以加入，默认就会变成IE8标准模式咯。

   

测试完毕! via：darkthread

标签:IE相关IE9文件模式文本模式IE Web