CSS hack寫法

常規(guī)

margin-bottom:40px;?????? /*ff的屬性*/

margin-bottom:140px\9;??? /* IE6/7/8的屬性 */

color:red\0;????????????? /* IE8支持 */

*margin-bottom:450px;???? /*IE6/7的屬性*/? +margin-bottom:450px;

_color:#ff0000;???????? /* 只ie6支持 */

#1 { color: #333; } /* FF環(huán)境 */

* html #1 { color: #666; } /* IE6環(huán)境 */

*+html #1 { color: #999; } /* IE7環(huán)境 */

CSS hack寫法

書寫順序為FireFox在最前,其次是IE8、IE7,最后是IE6。

color:red;//所有瀏覽器

color:blue\9;//所有IE

+color:orange;//IE7

_color:green;//IE6

若瀏覽器為FireFox,那么color:red;若瀏覽器為IE8,根據(jù)CSS優(yōu)先性原則,color:blue;若為IE7,color:orange;若為IE6,則color:green。

IE6識別 * 、_

IE7識別 * 、+

IE8識別 * 、\9,\0

只有IE8識別\0/

ie9只識別:\9

FF什么都不識別

示例:

{

color:#09F\0; /* IE8/9 */

color:#09F\0/; /* IE8 only */

}

t{color:#963\9; } /* IE9 only */

/*或者下面的,但是下面的優(yōu)先級小于上面的。Ps:老外的方法都是\0,根本沒考慮Opera*/

@mediaalland(min-width:0){

.test{color:red\9;}/* IE9 only */

}

====================================================

<div style="border: 1px solid red; width: 300px; padding: 10px;">

在Firefox中,div的完整寬度是padding+width,因此width: 300px; padding: 10px;的實際寬度是320px;而在IE6中,div的完整寬度是width,所以這個div和下面的div寬度一致。

</div>

<div style="border: 1px solid red; width: 300px;">

寬度為300px的div

</div>

<div style="border: 1px solid red; width: 280px !important; width: 300px; padding: 10px;">

通過借助!important標(biāo)記,可以設(shè)置Firefox中的width值為IE6中的width值減去padding值,這樣就實現(xiàn)了Firefox與IE6的padding效果尺寸兼容。

==============================================================

DOCTYPE標(biāo)準(zhǔn)firfox與ie6 padding的問題

首先我們說說firefox和IE對CSS的寬度顯示有什么不同:

其實CSS ’width’ 指的是標(biāo)準(zhǔn)CSS中所指的width的寬度,在firefox中的寬度就是這個寬度。它只包含容器中內(nèi)容的寬度。而Internet Explorer ’width’則是指整個容器的寬度,包括內(nèi)容,padding ,border。

Firefox中:容器占的寬度=內(nèi)容寬度+padding寬度+border寬度

IE中:內(nèi)容寬度=您定義的容器寬度(Internet Explorer ’width’)-padding寬度-border寬度

所以,如果IE中定義 width:120px;padding:5px 的話,所顯示的寬度就是120px.即padding:5px是在width里面。

而Firefox中,上面這個定義,顯示寬度就是 125 px;

所以,我們就必須這樣定義width:115px !important;width:120px;padding:5px;必須注意的是, !important; 一定要在前面。

除了在不同的瀏覽器上會有這個問題,還有可能是在編碼時引用了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

這個頭,他在ie瀏覽器下要支持w3標(biāo)準(zhǔn),w3的padding和firfox標(biāo)準(zhǔn)相同,所以也會出現(xiàn)上面的情況

網(wǎng)站如何同時兼容IE6、IE7、IE8

第一招:給常用CSS規(guī)定屬性值。

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}

img{border:0px;}

ul {margin:0px;padding:0px;}/

ul li {list-style:none;}

上面的建站常用代碼就相是格式化CSS樣式,讓各瀏覽器按照我們設(shè)置的屬性值渲染網(wǎng)頁

第二招:IE和FF下對象居中問題

IE下大家應(yīng)該知道只要設(shè)置body{text-align:center;}這樣就可以居中顯示。

但是這樣的方法在FF不行的。這里就需要給修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距離為0像素,左右為自動。所以FF就會居中顯示。

第三招:垂直居中(僅只用于一行)

比如說一個高30px的div,問題默認(rèn)是會顯示在左上角,如果想垂直居中對其可以加個line-height:30px;樣式。如果你想讓他居下方則在修改line-height:30px;

數(shù)值越大越局下,為了防止撐破層,還需要再給一個樣式overflow:hidden;(超出的部分不顯示)

第四招:給每一個塊對象設(shè)置三個樣式

width:**px;height:**px;overflow:hidden;即便高、寬是屬性值是自動那么也需要去設(shè)置這三個樣式。目的就是解決瀏覽器默認(rèn)值的問題。

第五招:針對IE6、IE7、FF的css樣式(這一招在特殊情況下經(jīng)常用到)

原來建設(shè)網(wǎng)站經(jīng)常使用!important來設(shè)置優(yōu)先權(quán),但有了IE7之后就不行了。下面給大家個可以解決IE6、IE7、FF各個CSS優(yōu)先權(quán)的方法

#1 { color: #333; } /* FF環(huán)境 */

* html #1 { color: #666; } /* IE6環(huán)境 */

*+html #1 { color: #999; } /* IE7環(huán)境 */

上面的書寫順序一定不能去改變。

這樣子網(wǎng)頁在FF下顯示#333,IE6下顯示#666,IE7下顯示#999;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容