IE8的样式兼容性适应方法【转】
文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。 前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。 了解文件兼容性的必要性 每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。 为了将这个风险降到最低,IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设,这会使页面以旧版本浏览器的视点显示,"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的<!DOCTYPE>指令。 若一个网页没有包含<!DOCTYPE>指令,IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识,IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。 随著时间经过,更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universal selector(即css之全局选择器 * {}),一些网站便使用它来针对IE做特定的对应。 当 IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。 IE8 比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入文件兼容性的概念,使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示,你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。 这能让你选择将你的网站更新支持IE8新特点的时机。 认识文件兼容性模式 IE8支持几种文件兼容性模式,它们具有不同的特性并影响内容显示的方式。 •Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。 由于edge mode使用该IE版本所能支持的最高模式来显示所浏览的网页内容,建议仅使用于测试页及其他非商用页面。 指定文件兼容性模式 要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。
<html>
<head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>My Web Page</title> </head> <body> <p>Content goes here.</p> </body> </html> 其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7,指定IE=5, IE=7, 或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。 X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外,它必须出现在网页header节其它元素之前的位置, 设定网站服务器以指定预设兼容性模式 网站管理员可籍着为网站定义一个自订标头来为他们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。举例来说,下列的web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。
<?xml version="1.0" encoding="utf-8"?>
<configuration> <system.webServer> <httpProtocol> <customHeaders> <clear /> <add name="X-UA-Compatible" value="IE=EmulateIE7" /> </customHeaders> </httpProtocol> </system.webServer> </configuration> 若你已于网站服务器指定了一个预设的文件兼容性模式,你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。 请查阅你的网站服务器关于指定自订标头的资讯,或看更多资料: Implementing the META Switch on Apache 判定文件兼容性模式 要判定网页使用IE8浏览时的文件兼容性模式,使用document object(文档对象)的documentMode功能。例如在IE8的网址列输入下列程式码会显示目前页面的文件模式。
javascript:alert(document.documentMode);
documentMode功能会回传一个数值对应目前页面的文件兼容性模式,举例来说,若网页指定为支持IE8模式,documentMode便会回传值"8"。 在IE6引入的compatMode功能不支持在IE8引入的documentMode功能。目前使用compatMode建立的应用程式还能在IE8中作用,但它们必须更新为使用documentMode。 若你希望使用JavaScript判定一个文件的兼容性模式,引入下面范例的这段程式码可支持旧版本的IE。
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer") { // This is an IE browser. What mode is the engine in? if (document.documentMode) // IE8 engine = document.documentMode; else // IE 5-7 { engine = 5; // Assume quirks mode unless proven otherwise if (document.compatMode) { if (document.compatMode == "CSS1Compat") engine = 7; // standards mode } } // the engine variable now contains the document compatibility mode. } 认识内容属性值 内容属性值在接收到异于先前叙述的数值时是具有弹性的。这能使你对于IE如何显示你的网页更有操控性。举例来说,你可以设定内容属性值为IE=7.5。当你这样做的时候,IE尝试将这个值转换为version vector并选择最接近的结果。在这个例子中,IE会将其设定为IE7 mode。下面的范例显示该模式设定为其他值的状况。
<meta http-equiv="X-UA-Compatible" content="IE=4"> <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5"> <!-- IE7 mode --> <meta http-equiv="X-UA-Compatible" content="IE=100"> <!-- IE8 mode --> <meta http-equiv="X-UA-Compatible" content="IE=a"> <!-- IE5 mode --> <!-- This header mimics Internet Explorer 7 and uses 注意: 前面的范例显示单独的内容值。实际上IE只会执行网页中第一个X-UA-Compatible标头。 你也可以使用内容属性来指定复数的文件兼容性模式,这能帮助确保你的网页在未来的浏览器版本都能一致的显示。欲设定复数的文件模式,请设定内容属性以判别你想使用的模式。使用分号来分开各个模式。 如果一个特定版本的IE支持所要求的兼容性模式多于一种,将採用列于标头内容属性中最高的可用模式。你可以使用这个特性来排除特定的兼容性模式,虽然并不推荐这样做。举例来说,下列标头即会排除IE7 mode。
<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" />
结论 兼容性对于网页设计师来说是非常重要的顾虑。虽然最好是可以建立一个完全不需依赖任何网页浏览器特性或功能的网站,有时候这是不可能实现的。文件兼容性模式便能将网页限制在某个特定版本的IE中。 使用X-UA-Compatible标头来指定你的页面支持的IE版本。使用document.documentMode判定页面的兼容性模式。 选择支持某个特定版本的IE,你可以确保你的页面在未来的浏览器版本中也能有显示的一致性。 |
转载于:https://www.cnblogs.com/codecrazy/archive/2009/06/29/1513465.html
IE8的样式兼容性适应方法【转】相关推荐
- html字体兼容ie8,IE8 CSS 样式兼容性清单
最近部门业务网站需要考虑IE8的兼容性,刚好查到MSDN上有IE系列浏览器对CSS兼容性的完整清单,把其中IE8部分的内容翻译了出来,作为备忘. =========================== ...
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距"无故"增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
- IE6 IE7 IE8 css bug兼容性解决方法总结归纳
转载自 http://blog.csdn.net/freshlover/article/details/7605207 1:li边距"无故"增加 任何事情都是有原因的,li边距也不 ...
- html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效,css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效 写了一个纯CSS的竖版流程样式,效果如下 起始 1 2 结束 使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
- 浏览器内核以及解决兼容性的方法
浏览器内核以及解决兼容性的方法 浏览器内核: 分类: 1.Trident(IE内核) Trident(IE内核):该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来 ...
- IE6、IE7、IE8、Firefox兼容性CSS
IE6.IE7.IE8.Firefox兼容性CSS HACK代码+示例 整理关于IE6.IE7.IE8.Firefox兼容性CSS HACK问题 1.区别IE和非IE浏览器CSS HACK代码 #d ...
- CSS HACK 区别 IE6、IE7、IE8、Firefox兼容性
转载链接:http://developer.51cto.com/art/201009/226787_1.htm 本文向大家描述一下如何使用CSS HACK区别IE6.IE7.IE8.Firefox兼容 ...
- IE6、IE7、IE8、IE9兼容性问题解决办法
前言 为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性.在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式. 新的IE为了确保网页 ...
- 兼容ffIE678 hack(IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例)
兼容ffIE678 hack(IE6.IE7.IE8.Firefox兼容性CSS HACK代码+示例) 1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blu ...
- iPhone 7/8plus 样式兼容性问题
iPhone 7/8plus 图片样式兼容性问题-弹性盒子 在平时我们前端的开发过程中,我们可能会遇到各种各样的兼容性问题,其中以移动端的兼容性问题最为突出(IE已挂),今天我就来举一个我日常开发中遇 ...
最新文章
- 10000+ gif表情包不是梦,get这一篇文就够了!!!小哥哥快到碗里来,再也不怕斗图没有表情包了
- 岚图FREE入局之战,手握哪些底牌?
- 基于python的界面自动化测试-基于Python语言的自动化测试系统的设计与实现
- System.Diagnostics.Process启动Civil 3D及AutoCAD
- mysql面试吗hi提_面试必备的10道MySQL题
- JavaEE实战班第十天
- ctfshow-萌新-web14( 曲线救国-POST请求绕过获取网站敏感信息)
- python mysql_Python-操作 MySQL
- MEMS惯性传感器初始姿态角的确定
- PDF文件转化成mobi格式,亲测kindle或者iReader可用!
- python pandas ewm 一次指数加权移动平均
- 博士申请——Research Proposal
- 数模转换器(DAC)——百度百科
- vue上传图片限制格式以及尺寸大小
- Spring-Mybatis整合 第一个Spring-Mybatis程序
- 心态不好的时候留给自己看
- 计算机取证科普性基础
- UE4 Socket多线程非阻塞通信【1】
- pdf文件内容查看器 -- 采用wpf开发
- MapReduce工作流程图
热门文章
- 阶段3 3.SpringMVC·_03.SpringMVC常用注解_6 CookieValue注解
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第5节 使用骨架创建maven的java工程_16maven工程servlet实例之jar包冲突...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_04 IO字节流_13_使用字节流读取中文的问题...
- 《出发吧一起》第二阶段个人总结——Day08
- 用VAE(variational autoencoder)做sentence embedding/representation或者其他任何结构数据的热presentation...
- iOS设置圆角的四种方法
- CentOS 5.4 安装和卸载桌面
- (转)C# 解析 json
- 有关C++11标准的一些粗浅认识
- 用Keil-MDK开发TQ2440裸机程序入门教程