CSS常見相容性問題總結

2021-07-28 09:26:55 字數 4345 閱讀 6223

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

這裡談到的瀏覽器,主要指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常見相容性問題總結

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

CSS常見相容性問題總結

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