CSS常見相容性問題及解決方法

2021-08-02 02:40:13 字數 1904 閱讀 4031

最近在研究瀏覽器相容性問題,所以準備寫篇愽客記錄一下(會持續更新);

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

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

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

主要的相容問題

(1)最主要也是最常見的,就是瀏覽器對標籤的預設支援不同,所以我們要統一,就要進行css reset . 最簡單的初始化方法是 * 但不推薦,而且它也並不完善,這裡可以參考我的另外一篇愽客常見的css重置設定。

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

解決的方式有兩個:

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

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

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

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

(4)標籤屬性min-height是不相容的,所以使用的時候也要稍微改改;

.box

a

:link

{} a

:visited

{} a

:hover

{} a

:active

{}

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

-webkit

-text

-size

-adjust: none;

(7)滑鼠的手勢:firefox的cursor屬性不支援hand,但是支援pointer,ie兩個都支援;所以為了相容都用pointer;

(8)css控制透明度問題:一般就直接 opacity: 0.6 ; ie就 filter: alpha(opacity=60);但在ie6下又有問題,所以又得弄成filter:progid:dximagetransform.microsoft.alpha(style=0,opacity=60);

(9)ie6下div高度無法小於10px;比如定義一條高2px的線條,ff和ie7都正常;但ie6就是10px;

解決的辦法有兩種:

新增overflow屬性或設定fontsize大小為高度大小 ;

div

div

(10)css3 風格的字首

如果你正在使用最新的 css **,比如 box-sizing,或者 background-clip等,確保你使用了合適的**商字首。

-moz- /* firefox 和其他使用 mozilla 瀏覽器引擎的瀏覽器 */

-webkit- /* safari,chrome 和其他使用了 webkit 引擎的瀏覽器 */

-o- /* opera */

-ms- /* ie 瀏覽器(但不總是 ie) */

CSS常見相容性問題及解決方案

css常見相容性問題及解決方案 1.上下margin重合問題 問題描述 相鄰的margin left和margin right是不會重合的,但是相鄰的塊級元素margin top 和margin bottom會產生重合。解決方案 統一設定margin top或者 marin bottom,不要混合使...

瀏覽器相容性問題及常見的解決方法

一.什麼是瀏覽器相容性問題 瀏覽器相容性問題又稱網頁相容性和 相容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致二產生瀏覽器和網頁間的相容問題。在 的設計和製作中,做好瀏覽器相容,才能夠讓 在不同的瀏覽器下都正常顯示。而對於瀏覽器軟體的開發和設計,瀏覽器對標準的更好相容能夠給使用者更好的使用體驗。...

CSS常見相容性問題及解決辦法彙總

我們都知道,不同版本瀏覽器對css的解析是有些分別的,特別是ie6,和ie7.雖然現在使用老版本的人數不多,但是還是有部分人在使用,我們並不能完全忽略這群使用者。如下所示 我們還是應該了解一下這些瀏覽器相容問題。問題一 在ie6元素浮動,如果寬度需要內容撐開,就給裡邊的塊元素都加浮動 不然會出不在同...