css相容性寫法的實例講解-html教學-PHP中文網

常見的瀏覽器核心引擎以及特定應用：

Trident： IE;

Gecko： Firefox;

webkit： Safari，Google Chrome，遨遊3，獵豹，百度；

Presto：Opera——Opera mini

書寫順序：firefox,IE8,IE7,IE6

：firefox,IE8,IE7,IE6

IE6:*,_

IE7:*,+

IE8:\9,\0

chrome：- webkit-

firefox：-moz-，root（僅ff認）

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="best-text mb-10"> 如果只让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无效</pre><div class="contentsignin">登入後複製</div></div>.
div1
*position:relative;
#-moz-background-size:50%;
-ms-content-zoom-limit- max:50%;
-o-box-shadow:5px10px20px#f0f;
 
}.div2{
position:
absoulte

important

;

 <br/>

登入後複製

第一問：寬度問題

給div一個width：300px;padding:10px;

##Firefox

實際寬度320px，padding是填上去的；支援！ important，IE忽略

IE6

實際寬300px，padding是300px裡面的，把content往裡面擠；

#頁的最小寬度

IE不認得min-，而它實際上把width當作最小寬度來使。為了讓這項指令在IE上也能用，可以把一個

放到標籤下，然後為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透明問題#o# ：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 ### FF：opacity:0.6。 ### [註] 最好兩個都寫，並將opacity屬性放在下面。 ######第五問：圓角問題###

IE：ie7以下版本不支援圓角。 FF： -moz-border-radius:4px

瀏覽器 bug
IE的雙邊距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 ; //這句話是關鍵}

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; }

p物件中的內容

解決技巧：在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

IE的css bug### ###############IE的css bug### ###############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

#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; //將物件作為區塊元素級的表格顯示}

太多了參考：

以上是css相容性寫法的實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！