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

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

一般來說，只有ie6不支援 !important

所以可以這樣

#example

h1h2

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

ie6可識別 *div

ie7可識別 *+div

再來看看主要的相容問題：

（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值會加倍。其實這種問題主要就是會把某些元素擠到了第二行

class="
wrap
">
class="
box">
class="
box">

ie6下左邊的雙邊距 ~

ie7的沒問題 ~

解決的方式有兩個：

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
class="
box1 mb
">
class="
box1 mt
">

看吧，本來該20px的現在它只有10px

解決辦法就是不要同時採用top和bottom ,統一一些~

（5）有些瀏覽器解析img標籤也有不同，img是行內的，一般都會緊接著排放，但是在有些情況下還是會突然出現個間距，解決辦法是給它來個浮動 float

(6)標籤屬性min-height是不相容的，所以使用的時候也要稍微改改。這樣吧：

.box

另一方面，ie是不支援min-height這類屬性的，所以有些時候也可以考慮使用css表示式

#container  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大小為高度大小如：

"
height:2px;overflow:hidden;background:#000000;width:778px;
">
"height:2px;font-size:2px;background:#000000;width:778px;
">&nbps;

-----------------相容性問題有很多，一次也說不完，往後遇到了，再慢慢新增進來-------------------------

CSS常見相容性問題總結

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

CSS常見相容性問題總結

CSS常見相容性問題總結

CSS常見相容性問題總結

CSS常見相容性問題總結

相關推薦