css相容性寫法大全
本文轉載於:猿2048網站▶css相容性寫法大全
常見的瀏覽器核心引擎以及具體應用：
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認）- *和_ ， ie6可以識別；
- * ， ie6,ie7可以識別；
- !important ,表示高優先順序，ie7及以上，firefox都支援，ie6認識帶!important的樣式屬性，但不認識!important的優先順序；
- -webkit- ，針對safari，chrome瀏覽器的核心CSS寫法
- -moz-，針對firefox瀏覽器的核心CSS寫法
- -ms-，針對ie核心的CSS寫法
- -o-，針對Opera核心的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一個 width：300px;padding:10px; Firefox實際寬度320px，padding是填上去的；支援！important，IE忽略 IE6
IE不認得min-，而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類,然後CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文件不太正規。它實際上通過Javascript的判斷來實現最小寬度。 第二問：水平居中問題 IE下只要設定body{text-align:center;}這樣就可以居中顯示。 Firefox不行 解決：body:{text-align:center;margin:0px auto;} 第三問：在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px div{margin:30px!important;margin:28px;} 第四問：CSS透明問題 IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好兩個都寫，並將opacity屬性放在下面。 第五問：圓角問題 IE：ie7以下版本不支援圓角。
FF： -moz-border-radius:4px 瀏覽器bug
IE的雙邊距bug
設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。
解決方案：在這個div裡面加上display:inline; 浮動 DIV浮動IE文字產生3象素的bug
左邊物件浮動，右邊採用外補丁的左邊距來定位，右邊物件內的文字會離左邊有3px的間距. #box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //這句是關鍵}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div> IE捉迷藏的問題
當div應用複雜的時候每個欄中又有一些連結，DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當滑鼠選擇這個區域是發現內容確實在頁面。 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構儘量簡單。 IE的layout私有屬性 作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。 .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} 排版 我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如: <div id=”page”>
<div id=”left”></div>
<div id=”center”></div>
<div id=”right”></div>
</div> 我們要將page的背景設定成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而page居然儲存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設定成 float,所以我們給他加個父元素 page變成爺爺； 高度不適應
高度不適應是當內層物件的高度發生變化時外層高度不能自動進行調節，特別是當內層物件使用margin 或paddign 時。
例：
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p物件中的內容</p>
</div>
解決技巧：在P物件上下各加2個空的div物件CSS程式碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。 IE6下為什麼圖片下有空隙產生
解決這個BUG的技巧也有很多,可以是改變html的排版,或者設定img 為display:block 或者設定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%}的寫法是沒錯的。那麼問題出在哪裡呢？答案是偽類中的連字元”-”。IE有個BUG，在處理偽類時，如果偽類的名稱中帶有連字元”-”，偽類名稱後面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。 div設定 margin-left, margin-right 為 auto 時已經居中，IE 不行，IE需要設定body居中，首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。 垂直居中=>內容換行問題
一個高30px的div，預設顯示左上角，如果想垂直居中對其可以加個line-height:30px;樣式。如果你想讓他居下方則修改line-height
數值越大越下，為了防止撐破，還需要再給一個樣式overflow:hidden;
塊級物件設定三個樣式解決瀏覽器預設值：寬高overfl
LI中內容超過長度後以省略號顯示的技巧
此技巧適用與IE與OP瀏覽器
li {width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
為什麼web標準中IE無法設定滾動條顏色了
解決辦法是將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下這個問題是因為預設的行高造成的,解決的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px
- 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 */
或者這樣設定：.hackbox{ display:table; //將物件作為塊元素級的表格顯示}
太多了 參考：http://www.jb51.net/c