css兼容性寫法大全

時間 2019-11-06

標籤 css 兼容性寫法大全欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站▶css兼容性寫法大全php

常見的瀏覽器內核引擎以及具體應用：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實際寬300px，padding是300px裏面的，把content往裏面擠；

頁面的最小寬度
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後面作一個統一的背景,譬如:

咱們要將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-heighthtml

數值越大越下，爲了防止撐破，還須要再給一個樣式overflow:hidden; web

塊級對象設置三個樣式解決瀏覽器默認值：寬高overflchrome

LI中內容超過長度後以省略號顯示的技巧 express

此技巧適用與IE與OP瀏覽器瀏覽器

li {

width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
} app

爲何web標準中IE沒法設置滾動條顏色了
解決辦法是將body換成html ide

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

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 */

或者這樣設置：.hackbox{ display:table; //將對象做爲塊元素級的表格顯示}

太多了參考：http://www.jb51.net/css/43686.html