1. 程式人生 > >IE6-10 相容性問題處理

IE6-10 相容性問題處理

一、通過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的標準模式進行渲染,因為他本身不支援IE9IE10
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >

二、IE中的select樣式問題

select
{ -webkit-appearance: none; -moz-appearance: none; appearance:none; background:none; background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; width:490px; border:1px solid #d9d9d9; height:30px; cursor:pointer; } select::-ms-expand{ color: #fff; font-size:20px; padding:5px 9px; background: #0054a7; display: none; border: none; }