1、chorme 最小字體的兼容性。
問(wèn)題描述：ff和IE最小字體可設(shè)置為1px，可是chorme中文版最小字體是12px，小于12px的字體全部顯示為12px.
解決方案：chorme支持CSS3的，可用
font-size : 12px;
-webkit-transform : scale(0.84,0.84) ;
*font-size:10px;
來(lái)解決，但是會(huì)發(fā)現(xiàn)整個(gè)容器都縮小了，變得不對(duì)齊了，再配合margin可解決
2、IE8及以下顯示圖片時(shí)多出一個(gè)邊框而Chrome或Firefox下卻沒(méi)有
問(wèn)題描述：顯示效果就是Chrome、FireFox、IE10以上都沒(méi)有問(wèn)題，但是IE8就多出了一個(gè)藍(lán)色邊框（有時(shí)為黑色的）。
解決辦法：需要指定img的邊框樣式即可： img{border-style:none;}
3、img圖片下的莫名留白問(wèn)題
問(wèn)題描述：圖片底部的空隙實(shí)際上涉及行內(nèi)元素的布局模型，圖片默認(rèn)的垂直對(duì)齊方式是基線，而基線的位置是與字體相關(guān)的。所以在某些時(shí)候，圖片底部的空隙可能是 2px，而有時(shí)可能是 4px 或更多。不同的 font-size 應(yīng)該也會(huì)影響到這個(gè)空隙的大小。
解決方法：給img設(shè)定 display:block或者vertical-align:top或bottom。
3、IE8下圖片透明兼容寫法：
問(wèn)題描述：opacity時(shí)=是CSS3屬性，ie8不支持
解決辦法：opacity:0.7;
filter:alpha(opacity=70); /*兼容ie*/
4、IE6、7下不識(shí)別display:inline-block
解決方法如下：
讓標(biāo)準(zhǔn)瀏覽器識(shí)別display:inline-block;
讓ie6/7識(shí)別display:inline;來(lái)覆蓋上面的display:inline-block;然后通過(guò)zoom:1;來(lái)觸發(fā)haslayout讓inline元素在ie中表現(xiàn)得和inline-block元素一樣。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
加上*zoom:1;(觸發(fā)ie6和ie7下的haslayout);
*display:inline(只有ie6和ie7識(shí)別);
注：一定要加在display:inline-block;后面。
5、IE6 雙邊距bug。
問(wèn)題描述：ie6下給浮動(dòng)容器定義margin-left 或者margin-right 實(shí)際效果是數(shù)值的2倍。
解決方案：給浮動(dòng)容器定義display:inline。
6、IE6下兩個(gè)層中間有間隙
產(chǎn)生條件：當(dāng)一個(gè)與浮動(dòng)元素相鄰的非浮動(dòng)元素并沒(méi)有指定具體的高度或?qū)挾葧r(shí)，非浮動(dòng)元素中的內(nèi)容會(huì)和浮動(dòng)元素的邊界產(chǎn)生3px的空隙。這個(gè)空隙只沿著非浮動(dòng)元素顯示。如果非浮動(dòng)的元素指定了一個(gè)具體的寬度或高度，這個(gè)時(shí)候非浮動(dòng)元素和浮動(dòng)元素出現(xiàn)了3px的空隙。
解決辦法：第一個(gè)浮動(dòng)元素設(shè)置margin-right:-3px;
7、IE6下當(dāng)多個(gè)浮動(dòng)元素中間夾雜著HTML注釋語(yǔ)句時(shí)，如果浮動(dòng)元素寬度為100%，則在下一行多顯示一個(gè)上一行最后一個(gè)字符。
解決辦法：給所有浮動(dòng)元素添加display:inline;。
8、IE6無(wú)法定義1px左右高度的容器
IE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的
解決方法: overflow:hidden;或 zoom:0.08;
9、a鏈接的hover狀態(tài)不起作用。
問(wèn)題描述：a:hover img{width:300px} 我們想讓鼠標(biāo)hover時(shí)，鏈接里包含的圖片寬度變化，這樣的樣式ie6是不認(rèn)的，在ie7、ff下才有效果。
10、a鏈接不起作用
問(wèn)題描述：a鏈接內(nèi)嵌button或者input type='button'按鈕，ie8及以下點(diǎn)擊無(wú)反應(yīng) ff chorme 正常
解決方法：給按鈕添加onclick='javascript:location.href='***.html''。這樣操作a鏈接無(wú)意義
11、block化的a鏈接不起作用
問(wèn)題描述：block化的a鏈接，其內(nèi)套absolute層，absolute層內(nèi)放置img，ie7以下鼠標(biāo)點(diǎn)擊img不會(huì)有鏈接效果，ff chorme下正常。
12、overflow:hidden對(duì)其下的絕對(duì)層position:absolute無(wú)效，absolute脫離文檔流。
解決方案：給overflow:hidden加position:relative或者position:absolute。
13、IE中設(shè)置滾動(dòng)條顏色，在FF chorme中無(wú)效
html {
scrollbar-face-color:red;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:blue;
scrollbar-3dlight-color:blue;
scrollbar-arrow-color:green;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:red;
}
14、清除浮動(dòng)的幾種方式：
1.添加空元素且設(shè)置clear:both;缺點(diǎn)：這個(gè)方式添加了添加了無(wú)意義的標(biāo)記
2.對(duì)父元素也進(jìn)行浮動(dòng)。缺點(diǎn)：與父元素同級(jí)的元素會(huì)受到影響。
3.為父元素設(shè)置overflow:hidden; 缺點(diǎn)：這會(huì)自動(dòng)清理包含的任何浮動(dòng)元素：
4.結(jié)合使用:after偽類和內(nèi)容聲明在指定的現(xiàn)有內(nèi)容的末尾添加新的內(nèi)容：
對(duì)父元素添加clear類
.clear:after {
content:'.';
height:0;
visibility:hidden;
display:block;
clear:both;
}
缺點(diǎn)：在IE6/7和更低版本中不起作用。
解決方法：
.clear {
zoom:1;
}
15、ff不識(shí)別background-position-y 或background-position-x;
解決辦法：background-position:x y;兩個(gè)都寫；
5 //Ie6下，不識(shí)別最大寬高度和最小寬高度，意即min-width/height和 Max-width/height
解決方法：
(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)整高度。）
15 //ie6 不支持 fixed
/*對(duì)于非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));
}
17//ie6下z-index不起作用的 bug
1）首先講講第一種z-index無(wú)論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有兩個(gè)：
1、父標(biāo)簽position屬性為relative；2、問(wèn)題標(biāo)簽含有浮動(dòng)(float)屬性。
2）所有瀏覽器：父標(biāo)簽position屬性為relative或absolute時(shí)，子標(biāo)簽的absolute屬性是相對(duì)于父標(biāo)簽而言的。而在IE6下，層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高，而要看它們的父標(biāo)簽的z-index誰(shuí)高誰(shuí)低。
11.//高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對(duì)象的高度發(fā)生變化時(shí)外層高度不能自動(dòng)進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對(duì)象使用margin 或paddign 時(shí)。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
p對(duì)象中的內(nèi)容
11.//為什么FF下文本無(wú)法撐開(kāi)容器的高度 標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開(kāi)的,那我又想固定高度,又想能被撐開(kāi)需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義: { height:auto!important; height:200px; min-height:200px; }
CSS hack
css hack是指一種兼容css在不同瀏覽器中正確顯示的技巧方法
IE各個(gè)版本hack
* 可被IE6、IE7識(shí)別 IE8/9、ff不能識(shí)別
_ 只能被IE6識(shí)別
*+ 只能被IE7識(shí)別 /*測(cè)試下IE67都識(shí)別*/
\0 可被IE8、9、10識(shí)別
\9 只能被IE6、7、8、9、10識(shí)別
\9\0 能被IE8、9、10識(shí)別
.header {_width:100px;} /* IE6專用*/
.header {*+width:100px;} /* IE7專用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6/7/8/9共用*/
.header {width:330px\9\0;} /* IE9專用*/
/*選擇器Hack：*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/
1、！important
IE789/firefox可以識(shí)別!important,看到此語(yǔ)句后就不會(huì)在執(zhí)行第二句
IE6會(huì)跳過(guò)!important語(yǔ)句（不識(shí)別）直接執(zhí)行第二句
這是一個(gè)誤區(qū)
大家注意一下，IE6只是在某些情況下不識(shí)別
例：div{background:red!important} div{background:green}，這時(shí)所有瀏覽器統(tǒng)一解釋為背景色red。
3、//IE專用的條件注釋
Firefox 與 Chrome 的 Hack
Firefox:@-moz-document url-prefix() /*寫在選擇器外層時(shí)（只可寫在此處）：Firefox only*/
Chorme:@media screen and (-webkit-min-device-pixel-ratio:0) /*寫在選擇器外層時(shí)（只可寫在此處）：Chrome only*/
before/after偽類IE67不識(shí)別
.example:before, .example before {}
.example:after, .example after {}
一個(gè)有冒號(hào)，一個(gè)是空格分隔。前者IE8+及其他現(xiàn)代瀏覽器；后者為IE6-7準(zhǔn)備的。
后期繼續(xù)補(bǔ)充及改善
聯(lián)系客服
