ie浏览器模式和文本模式

文章来自：http://www.iefans.net/ie9-wenbenmoshi-ceshi/

和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#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>IE9 Mode Test</title>

<script type="text/javascript">

function testScriptFeatures() {

var r = [];

r.push("IE9 Test->typeof document.body.style.opacity = "

+ typeof document.body.style.opacity);

r.push("IE8 Test->typeof window.JSON = "

+ typeof window.JSON);

r.push("IE7 Test->typeof document.body.style.maxWidth = "

+ typeof document.body.style.maxWidth);

document.getElementById("dvInfo").innerHTML = r.join("<br />");

}

</script>

<style type="text/css">

div

{

font-size: 9pt; font-family: Verdana;

margin: 5px; padding: 5px; width: 400px;

border: 1px solid red;

border-radius: 10px; /* IE9 */

}

div:first-child /* IE7+ */

{

background-color: yellow;

}

#dvInfo { background-color: #dddddd; }

#spnUA:before /* IE8+ */

{

content: "****";

}

</style>

</head>

<body onload="testScriptFeatures()">

<div><span id="spnUA">

User Agent: <%=Request.UserAgent%>

</span></div>

<div id="dvInfo"></div>

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

</body>

</html>

在以上的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。

    IE9文本模式

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

    选择IE7的文本模式

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

    选择IE8的文本模式

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

    选择IE9的文本模式

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

    选择IE7的浏览器模式

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

    选择IE8的浏览器模式

测试完毕!

posted @ 2014-05-09 23:01  世间安得两全法  阅读(1155)  评论(0)    收藏  举报