兼容古董級IE小結

時間 2020-06-17

標籤兼容古董小結简体版

原文原文鏈接

IE6已經死亡，固然7，8，9，10也掛掉了。微軟對IE11更下了狠手，對其中止了更新。覺得前端就能夠安安心心地寫代碼了。但是就是有些頑固分子，居然用的仍是IE6，尊崇客戶至上的原則，就噁心着給他兼容老古董。css

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

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標準，支持CSS二、CSS3選擇器。它修復了許多的HTML和CSS問題，並使得透明PNG在IE五、IE6下正確顯示。前端

使IE5,IE6兼容到IE7模式（推薦）chrome

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

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

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]–>app

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]–>ide

文檔模式渲染

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

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

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

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

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

6.若是一個特定版本的IE支持所要求的兼容性模式多於一種，以下代碼就是IE5和IE8兩種模式：

7.使用GCF來渲染頁面

若是安裝了GCF（Google Chrome Frame 谷歌內嵌瀏覽器框架，則使用GCF來渲染頁面，若是沒安裝GCF，則使用最高版本的IE內核進行渲染。這個插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、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:便可

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。