常見的瀏覽器內(nèi)核引擎以及具體應(yīng)用： Trident： IE； Gecko： Firefox； webkit： Safari，Google Chrome，遨游3，獵豹，百度； Presto：Opera——Opera mini 書寫順序：firefox,IE8,IE7,IE6 IE6:*,_IE7:*,+IE8:/9,/0 chrome：-webkit-firefox：-moz-，root（僅ff認(rèn)） *和_ ， ie6可以識別；
* ， ie6,ie7可以識別；
!important ,表示高優(yōu)先級，ie7及以上，firefox都支持，ie6認(rèn)識帶!important的樣式屬性，但不認(rèn)識!important的優(yōu)先級；
-webkit- ，針對safari，chrome瀏覽器的內(nèi)核CSS寫法
-moz-，針對firefox瀏覽器的內(nèi)核CSS寫法
-ms-，針對ie內(nèi)核的CSS寫法
-o-，針對Opera內(nèi)核的CSS寫法
如果只讓ie6看見用 *html .head{color:#000;} 如果只讓ie7看見用 *+html .head{color:#000;} 如果只讓ff看見用: root body .head{color:#000;} 如果只讓ff、IE8看見用 html /**/body .head{color:#000;} 如果只是不讓ie6看見用 html body .head{color:#000;} 即對IE 6無效 如果只是不讓ff、IE8看見用 *body .head{color:#000;} 即對ff、IE8無效.div1{
*position:relative;
-moz-background-size:50%;
-ms-content-zoom-limit-max:50%;
-o-box-shadow:5px10px20px#f0f;
}
.div2{
position:absoulte!important;
}
第一問：寬度問題給div一個(gè) width：300px;padding:10px;Firefox實(shí)際寬度320px，padding是填上去的；支持！important，IE忽略IE6實(shí)際寬300px，padding是300px里面的，把content往里面擠； 頁面的最小寬度
IE不認(rèn)得min-，而它實(shí)際上把 width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個(gè) div 放到 body 標(biāo)簽下，然后為div指定一個(gè)類,然后CSS這樣設(shè)計(jì)：
#container{ min-width: 600px; width:expression(document.body.clientWidth 600? 600px : auto );}
第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會讓你的HTML文檔不太正規(guī)。它實(shí)際上通過Javascript的判斷來實(shí)現(xiàn)最小寬度。 第二問：水平居中問題IE下只要設(shè)置body{text-align:center;}這樣就可以居中顯示。Firefox不行 解決：body:{text-align:center;margin:0px auto;} 第三問：在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px div{margin:30px!important;margin:28px;} 第四問：CSS透明問題 IE：filter:progid:DXImageTransform.Microsoft.Alpha( > FF：opacity:0.6。
[注] 最好兩個(gè)都寫，并將opacity屬性放在下面。第五問：圓角問題 IE：ie7以下版本不支持圓角。
FF： -moz-border-radius:4px 瀏覽器bug
IE的雙邊距bug
設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個(gè)ie6都存在的bug。
解決方案：在這個(gè)div里面加上display:inline; 浮動DIV浮動IE文本產(chǎn)生3象素的bug
左邊對象浮動，右邊采用外補(bǔ)丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有3px的間距. #box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關(guān)鍵}
div id= box
div id= left /div
div id= right /div
/div IE捉迷藏的問題
當(dāng)div應(yīng)用復(fù)雜的時(shí)候每個(gè)欄中又有一些鏈接，DIV等這個(gè)時(shí)候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個(gè)區(qū)域是發(fā)現(xiàn)內(nèi)容確實(shí)在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結(jié)構(gòu)盡量簡單。 IE的layout私有屬性作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應(yīng)，要在wrapper里面加上overflow:hidden; 當(dāng)包含float的box的時(shí)候，高度自動適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達(dá)到了兼容。.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 排版我們用得最多的css描述可能就是float:left.有的時(shí)候我們需要在n欄的float div后面做一個(gè)統(tǒng)一的背景,譬如: div id=”page”
div id=”left” /div
div id=”center” /div
div id=”right” /div
/div 我們要將page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會發(fā)現(xiàn)隨著left center right的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成 float,所以我們給他加個(gè)父元素 page變成爺爺； 高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā)生變化時(shí)外層高度不能自動進(jìn)行調(diào)節(jié)，特別是當(dāng)內(nèi)層對象使用margin 或paddign 時(shí)。
例：
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
div id= box
p p對象中的內(nèi)容 /p
/div
解決技巧：在P對象上下各加2個(gè)空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。 IE6下為什么圖片下有空隙產(chǎn)生
解決這個(gè)BUG的技巧也有很多,可以是改變html的排版,或者設(shè)置img 為display:block 或者設(shè)置vertical-align 屬性為vertical-align:top bottom middle text-bottom 都可以解決. IE的css bug 在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter {font-size:300%}后，顯示就正常了。但是同樣的代碼，在FireFox下看是正常的。按道理說，p:first-letter{font-size:300%}的寫法是沒錯(cuò)的。那么問題出在哪里呢？答案是偽類中的連字符”-”。IE有個(gè)BUG，在處理偽類時(shí)，如果偽類的名稱中帶有連字符”-”，偽類名稱后面就得跟一個(gè)空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。 div設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中，IE 不行，IE需要設(shè)定body居中，首先在父級元素定義text-algin: center;這個(gè)的意思就是在父級元素內(nèi)的內(nèi)容居中。 垂直居中= 內(nèi)容換行問題一個(gè)高30px的div，默認(rèn)顯示左上角，如果想垂直居中對其可以加個(gè)line-height:30px;樣式。如果你想讓他居下方則修改line-height
數(shù)值越大越下，為了防止撐破，還需要再給一個(gè)樣式overflow:hidden;
塊級對象設(shè)置三個(gè)樣式解決瀏覽器默認(rèn)值：寬高overfl
LI中內(nèi)容超過長度后以省略號顯示的技巧
此技巧適用與IE與OP瀏覽器
li { width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
為什么web標(biāo)準(zhǔn)中IE無法設(shè)置滾動條顏色了
解決辦法是將body換成html
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
為什么無法定義1px左右高度的容器
IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的,解決的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px
css初始化其中margin屬性對IE有效，padding屬性對FireFox有效。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;}
/* Clear Fix */
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
或者這樣設(shè)置：.hackbox{ display:table; //將對象作為塊元素級的表格顯示}
太多了 參考：
以上就是css兼容性寫法的實(shí)例講解的詳細(xì)內(nèi)容，html教程
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
