当前位置: 首页 > 编程日记 > 正文

设置IE兼容模式

文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。


前言

为了帮助确保你的网页在所有未来的IE版本都有一致的外观,IE8引入了文件兼容性。在IE6中引入一个增设的兼容性模式,文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。
新的IE为了确保网页在未来的版本中都有一支的外观,IE8引入了文件兼容性。当你引入一个增设的兼容性模式,
此文章说明文件兼容性的必要性,列出现有版本IE能使用的文件兼容性模式并示范如何选择特定的兼容性模式。


认识文件兼容性模式

IE8支持几种文件兼容性模式,它们具有不同的特性并影响内容显示的方式。

•Emulate IE8 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视<!DOCTYPE>指令。
•Emulate IE7 mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。 
•IE5 mode 编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。 
•IE7 mode编译内容如同IE7的standards mode之显示状况,无论网页是否含有<!DOCTYPE>指令。 
•IE8 mode提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。 
•Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。

由于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=5IE=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>


若你已于网站服务器指定了一个预设的文件兼容性模式,你可以在个别页面上指定不同的文件兼容性模式来盖过它。在网页中指定的模式优先权高于服务器中所指定的模式。

判定文件兼容性模式

要判定网页使用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 
     <!DOCTYPE> to determine how to display the Web page -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

注意: 前面的范例显示单独的内容值。实际上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/axl234/p/4079112.html

相关文章:

程序员的自我修养--链接、装载与库笔记:静态链接

1. 空间与地址分配 对于链接器来说,整个链接过程中,它就是将几个输入目标文件加工后合并成一个输出文件。测试代码a.c和b.c内容如下&#xff1a; // a.c extern int shared;int main() {int a 100;swap(&a, &shared); } // b.c int shared 1;void swap(int* a, in…

开启JAVA自学新篇章

MyEclipse Enterprise Workbench简称MyEclipse&#xff0c;是一款专门用于开发Java, J2EE的 Eclipse 插件集合&#xff0c;该软件不仅功能丰富而且强大&#xff0c;包括了完备的编码、调试、测试和发布功能&#xff0c;利用它我们可以在数据库和JavaEE的开发、发布以及应用程序…

12306系统的秒杀“艺术”:如何抗住100万人同时抢1万张票?

作者 | IT牧场 编辑 | 阿秃每到节假日期间&#xff0c;一二线城市返乡、外出游玩的人们几乎都面临着一个问题——抢火车票。虽然现在大多数情况下都能订到票&#xff0c;但是放票瞬间即无票的场景&#xff0c;相信大家都深有体会。尤其是春节期间&#xff0c;大家不仅使用 1230…

C#不错的扩展工具类

FSLibExtension.NET https://github.com/iccfish/FSLib.Extension WebEssentials2013 https://github.com/iccfish/WebEssentials2013

自己写的程序密码功能 ------数字功能

自己写的程序密码功能 ------数字功能 class LockedViewController: UIViewController { var dataBase:FMDatabase? var i 0 var passwordStr : String? var tempStr : String "" var numStr : String "" //初始输入密码 var reNumStr : String &…

程序员的自我修养--链接、装载与库笔记:Windows PE/COFF

1. Windows的二进制文件格式PE/COFF 在32位Windows平台下&#xff0c;微软引入了一种叫PE(Portable Executable)的可执行格式。作为Win32平台的标准可执行文件格式&#xff0c;PE有着跟ELF一样良好的平台扩展性和灵活性。PE文件格式事实上与ELF同根同源&#xff0c;它们都是由…

神州数码与神州控股、神州信息共同主办首届技术年会,透露出什么信号?

11 月 8 日&#xff0c;神州控股、神州数码集团、神州信息共同主办“数字中国 2019 技术年会”&#xff0c;聚焦云计算、大数据、人工智能、区块链、5G 等前沿技术创新与应用实践&#xff0c;众多领域的技术专家展开了深度交流&#xff0c;共同探讨数字时代的技术创新与协同发展…

osi七层协议和tcp/ip四层协议

&#xff08;大部分内容为转载&#xff09;OSI&#xff08;Open System Interconnection&#xff09;是一个开放性的通行系统互连参考模型&#xff0c;他是一个定义的非常好的协议规范&#xff0c;共包含七层协议。OSI七层协议是由ISO (International Standards Organization)在…

Swift中页面跳转与传值:

1.简单方式 首先&#xff0c;Swift的跳转可分为利用xib文件跳转与storyboard跳转两种方法&#xff0c;我这里选择使用storyboard的界面跳转方法。 1、通过在storyboard中拉button控件建立segue跳转。 2、通过presentViewController方法进行界面跳转。 这里需要注意presentV…

知乎热议!学完Python之后,我的编程能力竟然退化了!

在知乎上有一个特别火的问题&#xff1a;如何学Python&#xff1f;你会看到很多高赞回答是&#xff1a;我一天就学完了。在大家群嘲的背后&#xff0c;我们来分析一下&#xff0c;为什么在已经学过的人眼里&#xff0c;Python这么容易学&#xff0c;甚至简单到被某些人鄙视呢&a…

libjpeg-turbo介绍及测试代码

很多年之前在https://blog.csdn.net/fengbingchun/article/details/10171583 中简单介绍过libjpeg-turbo的安装&#xff0c;因为libjpeg-turbo一直在维护更新&#xff0c;较之前有了些变化&#xff0c;这里再次整理下&#xff0c;并增加更多的测试代码。 libjpeg-turbo的主页为…

高级特性-多线程,GUI

2019独角兽企业重金招聘Python工程师标准>>> 创建线程两种方式第一种&#xff0c;导入improt thread 模块&#xff0c;thread.start_new_thread(功能函数名称&#xff0c;(参数1&#xff0c;参数2...)) 后面参数为功能函数的参数第二个方式类似于java&#xff0c;导…

Hulu视频如何提升推荐多样性?

作者 | 余沾 整理 | 深度传送门&#xff08;ID: deep_deliver&#xff09;导读&#xff1a;本文主要介绍Hulu在NIPS 2018上发表的《Fast Greedy MAP Inference for Determinantal Point Process to Improve Recommendation Diversity》中&#xff0c;提出的DPP算法解决视频推荐…

UITextField长度限制的写法

1.遵循代理 UITextFieldDelegate 2.点击响应方法 userNameText.addTarget(self, action: "tappedOne:", forControlEvents: UIControlEvents.EditingChanged) 3.方法的实现 func tappedOne(textField: UITextField) { textField.text textField.text?.uppercaseS…

通过Python在Windows或Linux上快速搭建HTTP服务器

在Windows 7/10或Ubuntu上可以通过python2.x或python3.x来快速搭建一个简单的HTTP服务器。 如果python为2.x&#xff0c;则可执行&#xff1a;$ python -m SimpleHTTPServer 或 $ python2 -m SimpleHTTPServer 如果python为3.x&#xff0c;则可执行&#xff1a;$ python -m h…

NAND FLASH

NAND Flash 以Micron公司的MT29F2G08为例介绍NAND Flash原理和使用。 1&#xff0e; 概述 MT29F2G08使用一个高度复用的8-bit总线&#xff08;I/O[7:0]&#xff09;来数据传输、地址、指令。5个命令脚&#xff08;CLE、ALE、CE#、WE#&#xff09;实现NAND命令总线接口规程。3个…

swift 中跳转web view的两种方法

首先 遵循代理 引入头文件 #import <WebKit/WebKit.h> 第一种情况 直接跳转 了解不含特殊字符的 import UIKit class NewsViewController: UIViewController,WKNavigationDelegate,UIScrollViewDelegate { var webView : WKWebView WKWebView() override func viewW…

YAML开源库yaml-cpp简介及使用

关于YAML的介绍可以参考&#xff1a;https://blog.csdn.net/fengbingchun/article/details/88090609 yaml-cpp是用c实现的用来解析和生成yaml文件的&#xff0c;源码地址在https://github.com/jbeder/yaml-cpp &#xff0c;这里使用的是最新发布的稳定版0.6.2. 解析和产生yam…

数据安全引担忧?get它,让你吃一颗“定心丸”

网络购物、在线外卖、远程教育、共享单车……如今&#xff0c;这些数字化的消费场景在个人生活中早已司空见惯。同时&#xff0c;在数字化浪潮下&#xff0c;越来越多的企业意识到大数据资产的价值&#xff0c;并试图推动其数字化转型。数据经济飞速发展&#xff0c;带来便捷和…

ETL数据抽取策略

ETL的抽取策略本文所提到的数据加载策略为OLTP系统作为源系统&#xff0c;并进行ETL数据加载到OLAP系统中所采用的一般数据加载策略。依循数据仓库的工作方式&#xff0c;原始资料由源数据库被抽取出来后&#xff0c;将在中间过程被写入到”Operational Data Store”(ODS)&…

iOS下拉tableView实现上面的图片放大效果

#import "ViewController.h" #define kScreenbounds [UIScreen mainScreen].bounds #define kScreenWidth [UIScreen mainScreen].bounds.size.width #define kScreenHeight [UIScreen mainScreen].bounds.size.height // 宏定义一个高度 #define pictureHeight 200…

在Windows7/10上通过VS2013编译FFmpeg 4.1.3源码操作步骤

多年前在https://blog.csdn.net/fengbingchun/article/details/40951403 中对FFmpeg在windows下的编译过程做过说明&#xff0c;那时FFmpeg版本用的2.4.3, VS是2010&#xff0c;现在FFmpeg最新稳定版为4.1.3&#xff0c;通过VS2013进行编译&#xff0c;较之前有了些不同&#x…

GitHub标星近1万:只需5秒音源,这个网络就能实时“克隆”你的声音

作者 | Google团队 译者 | 凯隐 编辑 | Jane 出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;本文中&#xff0c;Google 团队提出了一种文本语音合成&#xff08;text to speech&#xff09;神经系统&#xff0c;能通过少量样本学习到多个不同说话者&…

entity framework 使用Mysql配置文件

2019独角兽企业重金招聘Python工程师标准>>> <?xml version"1.0" encoding"utf-8"?> <configuration><configSections><section name"entityFramework" type"System.Data.Entity.Internal.ConfigFile.En…

UIWebView、WKWebView使用详解及性能分析

一、整体介绍 UIWebView自iOS2就有&#xff0c;WKWebView从iOS8才有&#xff0c;毫无疑问WKWebView将逐步取代笨重的UIWebView。通过简单的测试即可发现UIWebView占用过多内存&#xff0c;且内存峰值更是夸张。WKWebView网页加载速度也有提升&#xff0c;但是并不像内存那样提…

FFmpeg中libavutil库简介及测试代码

libavutil是一个实用库&#xff0c;用于辅助多媒体编程。此库包含安全的可移植字符串函数、随机数生成器、数据结构、附加数学函数、加密和多媒体相关功能(如像素和样本格式的枚举)。libavcodec和libavformat并不依赖此库。 以下是测试代码&#xff0c;包括base64, aes, des, …

区块链人才月均薪酬1.6万元?

在上周&#xff0c;我国宣布将重点推动区块链技术的发展&#xff0c;这个消息无疑是为区块链开发者们打了一直强心剂&#xff0c;简直是喜大普奔啊 &#xff01; 因为之前区块链这个技术虽然一直在圈内很火&#xff0c;但是却没有得到国家的全面认可和推广&#xff0c;所以很多…

用最少的时间学最多的数据挖掘知识(附教程数据源)| CSDN博文精选

作者 | 宋莹来源 | 数据派THU&#xff08;ID:DatapiTHU&#xff09;本文为你介绍数据挖掘的知识及应用。引言最近笔者学到了一个新词&#xff0c;叫做“认知折叠”。就是将复杂的事物包装成最简单的样子&#xff0c;让大家不用关心里面的细节就能方便使用。作为数据科学领域从业…

WKWebView 的使用简介

1. navigationDelegate [objc] view plaincopy print?- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation { // 类似UIWebView的 -webViewDidStartLoad: NSLog("didStartProvisionalNavigation"); [UIAppli…

FFmpeg中libswscale库简介及测试代码

libswscale库功能主要包括高度优化的图像缩放、颜色空间和像素格式转换操作。 以下是测试代码(test_ffmpeg_libswscale.cpp)&#xff1a; #include "funset.hpp" #include <string.h> #include <iostream> #include <string> #include <memor…