CSS常見相容性問題總結

瀏覽器的相容性問題，通常是因為不同的瀏覽器對同一段**有不同的解析，造成頁面顯示不統一的情況。

這裡談到的瀏覽器，主要指ie6/ie7/ie... firefox chrome opera safari 等。但更多的相容還是考慮ie6/ie7/ff之間的鬥爭

先來談談css hack

我們為了讓頁面形成統一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的css樣式，所以我們就把這個針對不同瀏覽器/版本而寫css的過程叫做 css hack.

css hack主要有三種：ie條件注釋法、css屬性字首法、選擇器字首法。

（1）ie條件注釋法，即在正常**之外新增判別ie瀏覽器或對應版本的條件注釋，符合條件的瀏覽器或者版本號才回執行裡邊的**。

(2)css屬性字首法，即是給css的屬性新增字首。比如 * 可以被ie6/ie7識別，但 _ 只能被ie6識別，ie6-ie10都可以識別 "\9"，ie6不能識別!important firefox不能識別 * _ \9

可以先使用「\9"標記，將ie分離出來，再用」*"分離出ie6/ie7，最後可以用「_」分離出ie6

.type

所以可以按著優先順序就能給特定的版本捎上特定顏色

可以先使用「\9"標記，將ie分離出來，再用」*"分離出ie6/ie7，最後可以用「_」分離出ie6

.type

所以可以按著優先順序就能給特定的版本捎上特定顏色

為什麼說一般呢...你看看下面這個例子，ie6貌似還認得出!important

其實也能看出來了，當屬性一起寫在{}裡頭時，前者肯定會被後者覆蓋。要使!important有效，就應置於多個{}間。

h1 h1h2

說明：在標準模式中

（3）選擇器字首法，顧名思義，就是給選擇器加上字首。

ie6可識別 *div

ie7可識別 *+div

@media screen\9只對ie6/7生效

@media \0screen }只對ie8有效

@media \0screen\,screen\9}只對ie6/7/8有效

@media screen\0 } 只對ie8/9/10有效

@media screen and (min-width:0\0) } 只對ie9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) } 只對ie10有效等等

再來看看主要的相容問題：（1）最主要也是最常見的，就是瀏覽器對標籤的預設支援不同，所以我們要統一，就要進行css reset . 最簡單的初始化方法是 * 但不推薦，而且它也並不完善。貼乙個**的樣式初始化~

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td 
body, button, input, select, textarea 
h1, h2, h3, h4, h5, h6
address, cite, dfn, em, var 
code, kbd, pre, samp 
small
ul, ol 
a a:hover 
sup 
sublegend 
fieldset, img 
button, input, select, textarea 
table

(2)ie6雙邊距bug: 塊屬性標籤新增了浮動float之後，若在浮動方向上也有margin值，則margin值會加倍。其實這種問題主要就是會把某些元素擠到了第二行

解決的方式有兩個：

1.給float元素新增display：inline 即可正常顯示

2.就是hack處理了，對ie6進行 _margin-left:5px;

(3)跟上述差不多，也屬於ie6雙邊距bug: 行內屬性標籤，為了設定寬高，我們經常就會設定成display：block; 這樣一來就產生上述的問題。

解決辦法也是天津display：inline; 但是這樣一來我們就不能設定寬高了，所以呢需要再加個 display:table.

所以你設定display:block後，再添上display:inline和display:table

(4)上下margin重合問題，相鄰的兩個div margin-left margin-right 不會重合，但相鄰的margin-top margin-bottom會重合。

.box1 .mt.mb

（5）有些瀏覽器解析img標籤也有不同，img是行內的，一般都會緊接著排放，但是在有些情況下還是會突然出現個間距，解決辦法是給它來個浮動 float(6)標籤屬性min-height是不相容的，所以使用的時候也要稍微改改。這樣吧：

.box

簡單的記法是  love  hate

a:link{}  a:visited{}  a:hover{}  a:active{}

(8)chrome下缺省會將小於12px的文字強制按照12px來解析。解決辦法是給其新增屬性：

-webkit-text-size-adjust: none;

（9)png24位的在ie6下面會出現背景，所以最好還是使用png8格式的(10)因為存在兩種盒子模式：ie盒子模式和w3c標準模式，所以物件的實際寬度也要注意。ie/opera：物件的實際寬度 = (margin-left) + width + (margin-right)

firefox/mozilla：物件的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

（11）滑鼠的手勢也有問題：firefox的cursor屬性不支援hand，但是支援pointer，ie兩個都支援；所以為了相容都用pointer

（12）有個說法是：firefox無法解析簡寫的padding屬性設定。

如padding 5px 4px 3px 1px；必須改為 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。但我試了一下，發現還是可以解析的，難道是版本的原因？

（13）消除ul、ol等列表的縮排時，樣式應寫成:list-style:none;margin:0px;padding:0px; 其中margin屬性對ie有效，padding屬性對firefox有效

（14）css控制透明度問題：一般就直接 opacity: 0.6 ; ie就 filter: alpha(opacity=60)

但在ie6下又有問題，所以又得弄成 filter:progid:dximagetransform.microsoft.alpha(style=0,opacity=60);

(15)有些時候下方會出現一條間隙，通常會出現在ff和ie6下面比如

一般給img新增vertical-align屬性即可，比如top middle

img

(16)ie6下div高度無法小於10px比如定義一條高2px的線條，ff和ie7都正常

但ie6就是10px

解決的辦法有兩種：新增overflow屬性或設定fontsize大小為高度大小如：

&nbps;

CSS常見相容性問題總結

瀏覽器的相容性問題，通常是因為不同的瀏覽器對同一段有不同的解析，造成頁面顯示不統一的情況。這裡談到的瀏覽器，主要指ie6 ie7 ie.firefox chrome opera safari 等。但更多的相容還是考慮ie6 ie7 ff之間的鬥爭先來談談css hack 我們為了讓頁面形成統一的...

CSS常見相容性問題總結

CSS常見相容性問題總結

CSS常見相容性問題總結

CSS常見相容性問題總結

相關推薦