相容古董級IE小結，古董ie小結

相容古董級IE小結，古董ie小結

IE6已經死亡，當然7，8，9，10也掛掉了。微軟對IE11更下了狠手，對其停止了更新。以為前端就可以安安心心地寫代碼了。可是就是有些頑固分子，竟然用的還是IE6，尊崇客戶至上的原則，就噁心著給他相容老古董。

IE條件注釋，微軟官方推薦的hack方式

1 <!--[if IE]>這段文字只在IE瀏覽器上顯示<![endif]-->2 <!--[if IE 6]>這段文字只在IE6瀏覽器上顯示<![endif]-->3 <!--[if gt IE 6]>這段文字只在IE6以上版本IE瀏覽器上顯示<![endif]-->4 <!--[if ! IE 7]>這段文字在非IE7瀏覽器上顯示<![endif]-->5 <!--[if !IE]><!-->這段文字只在非IE瀏覽器上顯示!--<![endif]-->

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 ”></script><![endif]–>

以下兩個是不推薦的，我在瀏覽器出現了問題

1.使IE5,IE6,IE7相容到IE8模式

<!–[if lt IE 8]><script src=” http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js ”></script><![endif]–>

2.使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]–>

文檔模式渲染

1.強制使用IE5模式來解析

<meta http-equiv=“X-UA-Compatible” content=“IE=5″>

 

2.強制使用IE6模式來解析

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

 

3.強制使用IE7模式來解析的兩種方式

   <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″>

   <meta http-equiv=“X-UA-Compatible” content=“IE=7″>

 

 4.強制使用IE8模式來解析

 <meta http-equiv=“X-UA-Compatible” content=“IE=8″>

 

5. Google Chrome Frame也可以讓IE用上Chrome的引擎:

 <meta http-equiv=“X-UA-Compatible” content=“chrome=1″/>

 

6.如果一個特定版本的IE支援所要求的相容模式多於一種，如下代碼就是IE5和IE8兩種模式：

 <meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″/>

 

7.使用GCF來渲染頁面

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>

如果安裝了GCF（Google Chrome Frame Google內嵌瀏覽器架構，則使用GCF來渲染頁面，如果沒安裝GCF，則使用最高版本的IE核心進行渲染。這個外掛程式可以讓使用者的IE瀏覽器外不變，但使用者在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器核心，而且支援IE6、7、8等多個版本的IE瀏覽器。

相容技巧讓IE6支援max-width,min-width

IE沒有min-這個定義，實際上它把正常的width和height當作有min的情況來處理。如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。
比如要設定背景圖片，它寬度是很重要的:
#box{ width: 80px; height: 35px;}

html>body #box{ width: auto; height:auto; min-width: 80px; min-height: 35px;}

在早期IE中，可以在css中寫下類似js代碼來相容IE6

.sector{max-width:500px; _width:expression((documentElement.clientWidth>500)?"500px":"auto");min-width:300px; _width:expression((documentElement.clientWidth<300)?"300px":"auto");}

萬能 float 閉合

相信這個hask大家都不陌生，給需要閉合的div加上 class="clearfix" 即可。

 1 /* Clear Fix */ 2 .clearfix:after{ 3     content:"."; 4     display:block; 5     height:0; 6     clear:both; 7     visibility:hidden; 8 } 9 10 .clearfix{11     display:inline-block;12 }13 14  15 /* Hide from IE Mac */16 .clearfix {display:block;}17 /* End hide from IE Mac */18 /* end of clearfix */

對IE6PNG顯示問題

只需將透明png圖片命名為 *-trans.png ，但此方法對背景平鋪(background-repeat)和背景(background-position)無法起到任何作用,預設會佔滿整個容器。

marging與padding引起高度不適應

FF下給 div 設定 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決，隨著IE7對!important的支援，!important 方法現在只針對IE6的HACK。)。高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。例：

<div id="box"><p>p對象中的內容</p> </div> 

CSS：#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方案：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。

置中問題.

1).垂直置中.將 line-height 設定為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
2).水平置中. margin: 0 auto;(當然不是萬能)

浮動ie產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,不可控制(內嵌元素);

DIV浮動IE文本產生3象素的bug

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}
HTML代碼<div id="box"> <div id="left"></div><div id="right"></div></div>

標準模式和怪異模式盒模型：

標準模式下：Element width = width + padding + border

怪異模式下：Element width = width

IE6下某些情況line-height無效

當在一個容器裡文字和img、input、textarea、select、object等元素相連的時候，對這個容器設定的line-height數值會失效；同時以上元素的行高可能×2。

解決辦法：
對和文字相串連的img、input、textarea、select、object等元素加以屬性：
{margin: (所屬line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

 

其它

1, 若需給 a 標籤內內容加上 樣式, 需要設定 display: block;(常見於導航標籤)
2, ul 標籤在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)
3, 作為外部 wrapper 的div不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.

4,按鈕在IE7及更早瀏覽器下隨著value增多兩邊留白也隨著增加的問題。解決辦法：input,button{overflow:visible;}

5,button重設css樣式相容ie6,ie7，需要設定overflow:visible

6,IE6下無法定義很小的高度：如1px.。因為u預設會有行高，添加line-height:即可