主流瀏覽器有5種豌注,分別是:IE、chrome旦棉、firefox救斑、safari脸候、opera.
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)簽不撐開(kāi)父的高度。
解決方法:a 在子標(biāo)簽最后清浮動(dòng){<div
style="height:0;clear:both;"> </div>}
b 父標(biāo)簽添加{overflow:hidden佑钾;}
c 給父標(biāo)簽設(shè)置高度
5 Ie6下,不識(shí)別最大寬兽掰、高度和最小寬高度,意即min-width/height和 Max-width/height在ie6中沒(méi)效果瞻讽,
解決方法:
(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)容超過(guò)高度,元素會(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像素問(wèn)題:ie6下,當(dāng)浮動(dòng)元素與流動(dòng)元素并列顯示時(shí),他們之間會(huì)存在三像素問(wèn)題。
解決方法:用hack技術(shù), 例如:所有瀏覽器通用
height:100px;
ie6專用_height:100px;
ie7專用*+height:100px;
ie6/ie7共用*height:100px;
9 當(dāng)定義行內(nèi)元素為包含框時(shí),且包含框包含的絕對(duì)定位元素以百分比為單位進(jìn)行定位時(shí),會(huì)出現(xiàn)混亂乌妒。
解決方法:在行內(nèi)元素里加入{zoom:1;}
10 當(dāng)多個(gè)浮動(dòng)元素中間夾雜著HTML注釋語(yǔ)句時(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)先級(jí):被!important 注明的css屬性具有最高優(yōu)先級(jí)
(.abc{color:red !important;})。但在ie6中!important具有一個(gè)bug:在同一
組css屬性中债沮,!important不起作用炼吴。
14 火狐不識(shí)別background-position-y 或background-position-x;
15 解決 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);}
16 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*/
/*選擇器Hack:*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/