由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等靡狞,或者是同一廠商的瀏覽器的不同版本,如IE6和IE7炮赦,對(duì)CSS的解析認(rèn)識(shí)不完全一樣持舆,因此會(huì)導(dǎo)致生成的頁面效果不一樣,得不到我們所需要的頁面效果又跛。 為了使CSS代碼兼容不同的瀏覽器碍拆,有時(shí)候我們不得不使用CSS hack。?
工作中經(jīng)常用到的CSS hack:
1效扫、針對(duì)IE瀏覽器
IE6~IE10都認(rèn)識(shí)"\9"
比如:background-color: orange\9;在IE6倔监、IE7、IE菌仁、8浩习、IE9、IE10背景色都為橙色济丘;
IE8~IE10都認(rèn)識(shí)"\0"
比如:background-color: pink\0;在IE8谱秽、IE9、IE10背景色都為粉色摹迷;
IE6疟赊、IE7在屬性前面加“+”
比如:+background-color: purple\0;在IE6、IE7背景色都為紫色峡碉;
IE6在屬性前面加“_”
比如:_background-color: red\0;在IE6背景色都為紅色近哟;
微軟官方推薦使用的IE瀏覽器專有的Hack方式。
2鲫寄、Webkit內(nèi)核瀏覽器(Safari和Google Chrome)
@media screen and (-webkit-min-device-pixel-ratio:0) {
? ? ? ? .box {background: red;}
}
3吉执、Firefox瀏覽器
@-moz-document url-prefix() {?
? ? .box2 { background: red; }
}
還有一個(gè)之前遇到的問題地来,在iPhone上overflow:scroll;滑動(dòng)不順暢
在overflow:scroll;后面再加一個(gè)-webkit-overflow-scrolling: touch;就行了
基本常用的就這么多戳玫,后面遇到問題再補(bǔ)充