一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

 

 

 

x-ua-compatible 用来指定IE浏览器解析编译页面的model

 

x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用。

1、使用一行代码来指定浏览器使用特定的文档模式。

<meta http-equiv="x-ua-compatible" content="IE=9" >

<meta http-equiv="x-ua-compatible" content="IE=8" >

<meta http-equiv="x-ua-compatible" content="IE=7" >

 

2、在一些情况下,我们需要限定浏览器对文档的解析到某一特定版本,或者将浏览器限定到一些旧版本的表现中。可以用如下的方式:

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

 

使用这种写法,浏览器或者使用标准模式进行解析,或者使用 IE5 Quirks 模式进行解析。

 

3、为了测试,我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。

<meta http-equiv="x-ua-compatible" content="IE=edge" >

 

4、多个模式的指定。我们可以用逗号分割多个版本,这种情况下,浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子,在IE8进行浏览时,将会使用IE7的标准模式进行渲染,因为他本身不支持IE9和IE10。

<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >

参考:

http://www.cnblogs.com/cocowool/archive/2013/04/25/3043832.html

http://www.cnblogs.com/nidilzhang/archive/2010/01/09/1642887.html

http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx

 

 

 

 

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

2012-04-25 16:29:04| 分类: 学习 |字号 订阅
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案

百度也应用了这种方案去解决IE的兼容问题

百度源代码如下

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
<head>
<meta http-equiv=Content-Type content=“text/html;charset=utf-8″>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<title>百度一下,你就知道 </title>
<script>var wpo={start:new Date*1,pid:109,page:‘superpage’}</script>
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打开百度,右键查看源码看下!我们可以看下文件头是否存在这样一行代码!

这句话的意思是强制使用IE7模式来解析网页代码!

在这里送上几种IE使用模式!

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
2. Google Chrome Frame也可以让IE用上Chrome的引擎:

<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />
3.强制IE8使用IE7模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –>
//或者
<meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>
4.强制IE8使用IE6或IE5模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –> 

<meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –> 
5.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />
二.设定网站服务器以指定预设兼容性模式

如果服务器是自己的话,可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案,例如google的

ie7 – js中是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使 得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式(推荐)

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>
解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是:此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。

转载:http://hi.baidu.com/myplan/blog/item/cdb09dfa1fa748a99f514626.html


三、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
创建html5时发现这么一句话,不知其什么意思,百度如下:
这样写可以达到的效果是如果安装了GCF,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。Google Chrome Frame(谷歌内嵌浏览器框架GCF)。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
http://blog.csdn.net/abxn2002/article/details/7312459

 

在这里先介绍两个概念:浏览器模式(browser mode)和文档模式(document mode)。这两个模式的引入,让我们在IE浏览器上能够简单的处理兼容性问题,当然,其实也并不简单,先看看这两个概念的定义:

浏览器模式(browser mode):于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容。

默认情况下,IE8的浏览器模式为IE8。用户可以通过单击地址栏旁边的兼容性视图按钮来手动切换到不同的浏览器模式。在IE8中,IE8兼容性视图会以IE7文档模式来显示网页,同时会向服务器发送IE7的用户代理字符串。

文档模式(document mode):用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。

简而言之:浏览器模式的改变,能够改变请求中User Agent的值,让服务器获取后,能够按照UA的值进行对应处理(如果服务器上有这个处理功能)。而文档模式的改变只反映在本地的浏览器解析HTML上,对客户端显示会有影响,而对服务器透明。同时,修改浏览器模式会影响文档模式,反之却不成立。

使用文档兼容性的方法比较容易,就是在我们要反馈给客户端的HTML代码中的head中添加一个meta元素,用来描述当前的文档需要使用何种浏览器版本来解释当前文档,代码类似下面这样:

  1. <html>
  2. <head>
  3.   <!-- Mimic Internet Explorer 7 -->
  4.   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  5.   <title>测试模拟IE7浏览模式</title>
  6. </head>
  7. <body>
  8.   <!--这里是你网站的内容-->
  9. </body>
  10. </html>

复制代码

X-UA-compatible在使用中,大小写不敏感,如果你需要客户端模拟其他的浏览器版本来解析文档你可以设置为对应的版本即可,通常的设置有如下几种:

文档兼容性设置 X-UA-compatible

X-UA-Compatible值

说明

IE=5让浏览器使用Quirks mode来显示,实际上是使用Internet Explorer 7 的 Quirks 模式来显示内容,这个模式和IE5非常相似。
IE=edge这个设置是让IE使用当前的最高版本进行文档的解析,官方文档指明,edge模式仅适用在测试环境,不建议在生产环境中使用
IE=7使用标准IE7来处理
IE=EmulateIE7模拟IE7来处理,遵循 <!DOCTYPE> 指令,如果文档有当前有一个合法的<!DOCTYPE>,就使用IE7模式,否者使用Quirks模式(Internet Explorer 5 Quirks),对于大部分网站来说,这是首选的兼容性模式
IE=8标准IE8
IE=EmulateIE8模拟IE8,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明
IE=9标准IE9
IE=EmulateIE9模拟IE9,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明
chrome=1强制使用Chrome,需要IE下Chrome插件支持
IE=EmulateIE10模拟IE10
IE=10标准IE10,遵循 <!DOCTYPE> 指令,参照IE=EmulateIE7说明

当然,除了这之外,你还可以设置其他值,甚至可以是7.5这样的数值(个人不建议),IE解释的时候,会尝试将数值转为最接近的版本。chrome这个是使用Chrome插件来处理当前的文档内容,你也可以在HTML中插入下面的代码,以便在用户没有安装Chrome插件的时候,提醒用户:

  1. <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
  2.  
  3. <!--在需要使用的地方进行Chrome Check-->
  4. <script>CFInstall.check();</script>

复制代码

这样在用户访问的时候,如果发现没有安装Chrome插件,就会提示安装Chrome插件。

到这里,我们基本上已经知道怎么使用X-UA-Compatible标头了,让我们更进一步!

其实,X-UA-Compatible不仅可以用meta元素放在页面内,也可以在服务器上进行配置,比如在IIS上配置默认的Header,或者在使用.NET中配置web.config文件,让服务器端配置上默认的标头,这样系统就有默认的标头来指定全局的文档模式。因为单个页面的文档模式设置会覆盖默认的文档模式,因此,在某个需要特殊的文档模式展示的页面可以在进行单独配置meta元素即可。

在IIS7中的配置X-UA-Compatible标头如下:

1.png 

转载于:https://my.oschina.net/u/2558718/blog/709389

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你在 IE 浏览器中使用 FreeMarker,并且想要实现文本超过两行显示省略号的效果,可以尝试以下方法: 1. 使用 CSS 的 `-ms-line-clamp` 属性: ```html <style> .text-container { display: -webkit-box; /* 兼容其他浏览器 */ display: -ms-flexbox; /* 兼容 IE 浏览器 */ -webkit-line-clamp: 2; /* 控制显示的行数 */ -ms-line-clamp: 2; /* 控制显示的行数,仅在 IE 浏览器中生效 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } </style> <div class="text-container"> ${text} <!-- 这里是你要显示的文本内容 --> </div> ``` 在上面的示例中,我们使用了 `-ms-line-clamp` 属性来控制文本容器在 IE 浏览器中显示的行数为 2 行。同时,为了兼容其他浏览器,我们也保留了 `-webkit-line-clamp` 属性。 2. 使用 JavaScript 进行兼容性处理: 如果以上方法在 IE 浏览器中仍然不起作用,你可以尝试使用 JavaScript 来进行兼容性处理。以下是一个示例代码: ```html <style> .text-container { max-height: 3.6em; /* 控制显示的行数,这里设置 3.6em 是因为每行大约是 1.2em 的高度 */ overflow: hidden; text-overflow: ellipsis; } </style> <div class="text-container" id="textContainer"> ${text} <!-- 这里是你要显示的文本内容 --> </div> <script> var textContainer = document.getElementById('textContainer'); if (textContainer.offsetHeight < textContainer.scrollHeight) { textContainer.style.maxHeight = '2.4em'; /* 如果内容超过 2 行,则设置最大高度为 2 行 */ } </script> ``` 在这个示例中,我们首先通过 CSS 设置了容器的样式,然后使用 JavaScript 动态判断内容是否超过了两行。如果超过了两行,我们通过修改容器的最大高度来实现省略号效果。 请注意,在使用 JavaScript 进行兼容性处理时,确保在文档加载完毕后执行 JavaScript 代码,以避免出现找不到元素的问题。 希望以上方法能够帮助你在 IE 浏览器中实现文本超过两行显示省略号的效果。如果问题仍然存在,请提供更多的代码和上下文信息,以便我能够更好地帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值