css相容性寫法的實例講解

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

     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認）
   
*和_ ，ie6可以辨識；
*      ， ie6,ie7可以辨識；
!important  ,表示高優先級，ie7以上，firefox都支持，ie6認識帶!important的樣式屬性，但不認識!important的優先權；
-webkit- ，針對safari，chrome瀏覽器的核心CSS寫法
#-moz-，針對firefox瀏覽器的核心CSS寫法
#-ms-，針對ie核心的CSS寫法

- o-，針對Opera核心的CSS寫法

1. <span class="pun"><span class="pln"><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&gt;/**/body .head{color:#000;} 　　如果只是不让ie6看见用 html&gt;body .head{color:#000;} 即对IE 6无效 　　如果只是不让ff、IE8看见用 *body .head{color:#000;} 即对ff、IE8无效</pre><span class="pun"></span></span></span>.

   div1
{

2. <span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"></span></span>*</span>position</span>:</span>relative;

3. <span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun">#-<span class="lit">moz<span class="pun">-</span>background</span>-</span>size</span>:</span>50</span>%;</span></span></span>

4. <span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun">-<span class="pln">ms<span class="pun">-<span class="pln">content<span class="pun">-<span class="lit">zoom<span class="pun">-</span>limit</span>-</span> max</span>:</span>50</span>%;</span></span></span></span></span></span></span>

5. <span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun">-<span class="lit">o<span class="lit">-<span class="lit">box<span class="com">-</span>shadow</span>:</span>5px</span>10px</span>20px</span>#f0f;</span></span></span></span></span>

7. <span class="pun"><span class="pln"><span class="pun"></span></span> </span>

8. }<span class="pln"><span class="pun"><span class="pln"><span class="pun"><span class="pln"><span class="pun">.</span>div2</span>{</span></span></span></span>

9. position:

   absoulte
!

important

;

#}

 <br/>

 
第一問：寬度問題

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

##Firefox

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

IE6

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

 

#頁的最小寬度

 

IE不認得min-，而它實際上把width當作最小寬度來使。為了讓這項指令在IE上也能用，可以把一個dc6dce4a544fdca2df29d5ac0ea9906b 放到6c04bd5ca3fcae76e30b72ad730ca86d 標籤下，然後為div指定一個類別,然後CSS這樣設計： 

#container{ min-width: 600px; width:expression(document.body.clientWidth b7ececf50701bb9f13d9a4b273270a36 961dd75297247cb17f67e6948fb0666816b28748ea4df4d9c2150843fecfba68 

2f2ff34e01cede92ca72f5915aa0a53f16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 
 

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後面做一個統一的背景,譬如: 

e4acf4457cd2dcf6743269aee2ac6992 

# c321ef1fa01b31fde2d6c964d94c349316b28748ea4df4d9c2150843fecfba68 

2e80957d70bf614c5390c2422aae5ab116b28748ea4df4d9c2150843fecfba68 

d12f819607ea571af65bb02cafd068f416b28748ea4df4d9c2150843fecfba68 

d12f819607ea571af65bb02cafd068f416b28748ea4df4d9c2150843fecfba68 ; 

16b28748ea4df4d9c2150843fecfba68 我們要將page的背景設為藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們給他加個父元素page變成爺爺；

 


高度不適應 

高度不適應是當內層對象的高度改變時外層高度不能自動調節，特別是當內層對象使用margin 或paddign 時。
範例： 

#box { } 

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 

3ecdb48de22f020ee1aa648296c988dbp物件中的內容94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 解決技巧：在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有效。

1. body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin :0;padding:0;}  

2. img{border:0px;}  

3. ul {margin:0px;padding:0px;} /  

4. 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中文網其他相關文章！