CSS瀏覽器相容問題與方案

2021-06-05 23:25:35 字數 1326 閱讀 7834

1. ie5以及以下版本不能正常計算出css box的寬度。如下圖所示,正常的計算應該如左圖,

box的寬度=margin*2 + padding*2 + boder*2 + width

但是ie5及以下版本瀏覽器不會按這個方法計算box的寬度,而是把padding和boder的值計算到width裡(等於是忽略了),如右圖所示

box的寬度=margin*2 + width

影響:如果為有這樣問題的ie5和沒有這樣問題的瀏覽器都指定乙個寬度(width屬性),那麼ie5顯示出來的box會比其它的小。

比如:乙個div中乙個的 width為100, padding*2=30(左右各15),border*2=10(左右各5),margin*2=20,那麼按正常顯示,容納這個div的總寬度應該為160。應該顯示成這麼大乙個框。

但是ie5裡計算這個框時,大小只會計算出來width+margin*2=100+20=120; 顯然這個框比預期的160小了40

解決的辦法:給ie5的多加些值,如上例中要加40,即的width應設定為100+padding*2+border*2=100+40=140。

具體**

* html .pullquote
其中,

* html .pullquote
3. 出來雙倍margin的問題(the double-margin bug)

產生條件:當box是float:left,並且box中的元素設定了左邊的邊界,即margin-left值;或者float:right,且margin-right有值;(合起來就是float方向與margin設定方向相同)

影響:會重複一次margin,產生雙倍margin.

影響範圍:ie6以及以下版本。

解決辦法:在css中加入如下html hack**:

* html .sidebar

4.  多餘空白問題(ie 7 and earlier white space bug)

CSS瀏覽器相容問題大全

1 firefox下父容器的高度自適應 height 100 overflow auto 2 ie6的雙倍邊距bug display inline 3 超連結訪問過後hover樣式不出現的問題 改變css屬性的排列順序 l v h a 4.ff下使連續長欄位自動換行 ie中直接使用word wrap...

CSS及瀏覽器相容問題

css 框模型概述 元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素。內邊距 邊框和外邊距都是可選的,預設值是零。但是,許多元素將由使用者 樣式表設定外邊距和內邊距。可以通過將元素的 m...

css瀏覽器相容問題集錦

表單按鈕用input type submit和a鏈結兩者表現不一致的問題 表單的輸入框 文字 驗證碼沒有對齊 ie6 7中margin失效 ie6中margin雙邊距 1 問題 表單按鈕用input type submit和a鏈結兩者表現不一致的問題。input.btn.btn 解決方案 btn w...