一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE10

一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE10

在網(wǎng)站開發(fā)中不免因?yàn)楦鞣N兼容問題苦惱,針對兼容問題,其實(shí)IE給出了解決方案Google也給出了解決方案

百度也應(yīng)用了這種方案去解決IE的兼容問題

百度源代碼如下

百度一下,你就知道

var wpo={start:new Date*1,pid:109,page:‘superpage’}

可以打開百度,右鍵查看源碼看下!我們可以看下文件頭是否存在這樣一行代碼!

這句話的意思是強(qiáng)制使用IE7模式來解析網(wǎng)頁代碼!

在這里送上幾種IE使用模式!

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

3.強(qiáng)制IE8使用IE7模式來解析

//或者

4.強(qiáng)制IE8使用IE6或IE5模式來解析

?

?

5.如果一個(gè)特定版本的IE支持所要求的兼容性模式多于一種,如:

二.設(shè)定網(wǎng)站服務(wù)器以指定預(yù)設(shè)兼容性模式

如果服務(wù)器是自己的話,可以在服務(wù)器上定義一個(gè)自訂標(biāo)頭來為它們的網(wǎng)站預(yù)設(shè)一個(gè)特定的文件兼容性模式。這個(gè)特定的方法取決于你的網(wǎng)站服務(wù)器。

錄入,下列的 web.config文件使Microsoft Internet Information Services (IIS)能定義一個(gè)自訂標(biāo)頭以自動(dòng)使用IE7 mode來編譯所有網(wǎng)頁。

另外還有一起其他的解決方案,例如google的

ie7 – js中是一個(gè)JavaScript庫(解決IE與W3C標(biāo)準(zhǔn)的沖突的JS庫),使微軟的Internet Explorer的行為像一個(gè)Web標(biāo)準(zhǔn)兼容的瀏覽器,支持更多的W3C標(biāo)準(zhǔn),支持CSS2、CSS3選擇器。它修復(fù)了許多的HTML和CSS問題,并使 得透明PNG在IE5、IE6下正確顯示。

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



使IE5,IE6,IE7兼容到IE8模式



使IE5,IE6,IE7,IE8兼容到IE9模式



解決PNG顯示問題

只需將透明png圖片命名為*-trans.png

需要注意的是:此方法對背景平鋪(background-repeat)和背景(background-position)無法起到任何作用,默認(rèn)會(huì)占滿整個(gè)容器。

轉(zhuǎn)載:http://hi.baidu.com/myplan/blog/item/cdb09dfa1fa748a99f514626.html

三、

創(chuàng)建html5時(shí)發(fā)現(xiàn)這么一句話,不知其什么意思,百度如下:

這樣寫可以達(dá)到的效果是如果安裝了GCF,則使用GCF來渲染頁面,如果沒安裝GCF,則使用最高版本的IE內(nèi)核進(jìn)行渲染。Google Chrome Frame(谷歌內(nèi)嵌瀏覽器框架GCF)。這個(gè)插件可以讓用戶的IE瀏覽器外不變,但用戶在瀏覽網(wǎng)頁時(shí),實(shí)際上使用的是Google Chrome瀏覽器內(nèi)核,而且支持IE6、7、8等多個(gè)版本的IE瀏覽器。

http://blog.csdn.net/abxn2002/article/details/7312459

常見瀏覽器的兼容問題

  初學(xué)html和css時(shí),每天切圖,總會(huì)遇到很多瀏覽器兼容性問題。最近一直關(guān)注移動(dòng)平臺(tái)開發(fā),就html和css來說,不用考慮那么多瀏覽器兼容性問題。到現(xiàn)在,以至于很多瀏覽器兼容性幾乎忘光了。今天把以前總結(jié)的知識(shí)拿來分享一下,順便自己也復(fù)習(xí)一下。當(dāng)然,其中肯定有很多不足,望指正啊。


1 ie6.0橫向margin加倍

產(chǎn)生因素:塊屬性、float、有橫向margin。

解決方法:display:inline;

2 ie6.0下默認(rèn)有行高

解決方法:overflow:hidden;或font-size:0;或line-height:xx px;

3 在各個(gè)瀏覽器下img有空隙(原因是:回車。)

解決方法:讓圖片浮動(dòng)。

4 一個(gè)父標(biāo)簽與幾個(gè)子標(biāo)簽嵌套,父標(biāo)簽不浮動(dòng),子標(biāo)簽float,子標(biāo)簽不撐開父的高度。

解決方法:a 在子標(biāo)簽最后清浮動(dòng){

}

? ? ? ? ? ? ? ? ? b 父標(biāo)簽添加{overflow:hidden;}

? ? ? ? ? ? ? ? ? c 給父標(biāo)簽設(shè)置高度

5 Ie6下,不識(shí)別最大寬、高度和最小寬高度,意即min-width/height和 Max-width/height在ie6中沒效果,

解決方法:(1):.abc{border:1px blue solid;width:200px;height:200px;}

? ? ? ? ? ? ? ? ? ? ? ? ? html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}

? ? ? ??(2):.abc{width:200px;height:200px;_width:200px;_height:200px;}(因?yàn)閕e6有一個(gè)特征,當(dāng)定義一個(gè)高度時(shí),如果內(nèi)容超過高度,元素會(huì)自動(dòng)調(diào)整高度。)

6 Ie6里面:如li設(shè)寬、高,并且li里面的標(biāo)簽浮動(dòng),那么li之間會(huì)有間距

解決方法:li不設(shè)寬、高或者li內(nèi)的標(biāo)簽不浮動(dòng)

7 ?li之間有間距

解決方法:li 設(shè)置vertical-align:middle;

8 3像素問題:ie6下,當(dāng)浮動(dòng)元素與流動(dòng)元素并列顯示時(shí),他們之間會(huì)存在三像素問題。

? ?解決方法:用hack技術(shù), 例如:所有瀏覽器通用 height:100px;?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6專用_height:100px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie7專用*+height:100px;?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6/ie7共用*height:100px;

9 當(dāng)定義行內(nèi)元素為包含框時(shí),且包含框包含的絕對定位元素以百分比為單位進(jìn)行定位時(shí),會(huì)出現(xiàn)混亂。

? ? 解決方法:在行內(nèi)元素里加入{zoom:1;}

10 當(dāng)多個(gè)浮動(dòng)元素中間夾雜著HTML注釋語句時(shí),如果浮動(dòng)元素寬度為100%,則在下一行多顯示一個(gè)上一行最后一個(gè)字符。

? ? ? ? 解決辦法:給浮動(dòng)元素添加display:inline;。

11 opacity 定義元素的不透明度

? filter:alpha(opacity=80);/*ie支持該屬性*/

? opacity:0.8;/*支持css3的瀏覽器*/

12 兩個(gè)塊元素,豎向的margin值不增加,會(huì)重疊,其間距為最大margin值。

13 優(yōu)先級:被!important 注明的css屬性具有最高優(yōu)先級(.abc{color:red !important;})。但在ie6中!important具有一個(gè)bug:在同一組css屬性中,!important不起作用。

14?火狐不識(shí)別background-position-y 或background-position-x;


---------------------------2014.01.10補(bǔ)充-------------------------------

15 ie6 不支持 fixed?

/*對于非IE6可以這樣寫*/#top{?

? ? position:fixed;?

? ? bottom:0;?

? ? right:20px;?

}? /*但是IE6是不支持fixed定位的,需要另外重寫*/#top{?

? ? position:fixed;?

? ? _position:absolute;?

? ? top:0;?

? ? right:20px;?

? ? _bottom:auto;?

? ? _top:expression(eval(document.documentElement.scrollTop));

}? /*使用hack使IE6實(shí)現(xiàn)該效果,但這個(gè)東東會(huì)閃爍,需要以下代碼*/*html{?

? ? background-image:url(about:blank);?

? ? background-attachment:fixed;?

}? /*使固定在頂部*/#top{?

? ? _position:absolute;?

? ? _bottom:auto;?

? ? _top:expression(eval(document.documentElement.scrollTop));?

}? /*固定在底部*/#top{?

? ? _position:absolute;?

? ? _bottom:auto;?

? ? _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));?

}? /*垂直居中*/#top{? ? position:fixed;? ? top:50%;? ? margin-top:-50px;? ? _position:absolute;? ? _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));

}

16 ?解決 ie6 最大、最小寬高 hack方法

/* 最小寬度 */.min_width{? ? min-width:300px;? ? _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);

}/* 最大寬度 */.max_width{? max-width:600px;? _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);

}/* 最小高度 */.min_height{? min-height:200px;? _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);

}/* 最大高度 */.max_height{? max-height:400px;? _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);

}


17 ?z-index不起作用的 bug

1)ie6下 首先講講第一種z-index無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個(gè):1、父標(biāo)簽position屬性為relative;2、問題標(biāo)簽含有浮動(dòng)(float)屬性。

2)所有瀏覽器:它只認(rèn)第一個(gè)爸爸

層級的高低不僅要看自己,還要看自己的老爸這個(gè)后臺(tái)是否夠硬。用術(shù)語具體描述為:

父標(biāo)簽position屬性為relative或absolute時(shí),子標(biāo)簽的absolute屬性是相對于父標(biāo)簽而言的。而在IE6下,層級的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高,而要看它們的父標(biāo)簽的z-index誰高誰低。

18 ?ie各個(gè)版本hack

/*類內(nèi)部hack:*/? ? .header {_width:100px;}? ? ? ? ? ? /* IE6專用*/? ? .header {*+width:100px;}? ? ? ? /* IE7專用*/? ? .header {*width:100px;}? ? ? ? ? ? /* IE6、IE7共用*/? ? .header {width:100px\0;}? ? ? ? /* IE8、IE9共用*/? ? .header {width:100px\9;}? ? ? ? /* IE6、IE7、IE8、IE9共用*/? ? .header {width:330px\9\0;}? ? /* IE9專用*//*選擇器Hack:*/? ? *html .header{}? ? ? ? /*IE6*/

? ? *+html .header{}? ? /*IE7*/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容