CSS中IE和火狐對margin、padding的相容性解析

阿新 • • 發佈：2019-01-14

CSS對瀏覽器器的相容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這裡介紹一下相容要點。
常見相容問題：
1.DOCTYPE 影響 CSS 處理
2.FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行
3.FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
5.

FF: 支援 !important, IE 則忽略, 可用 !important 為 FF 特別設定樣式
6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後--文字，就垂直居中了。缺點是要控制內容不要換行
7.cursor: pointer 可以同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 可以
8.FF: 連結加邊框和背景色，需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中--一個空格。
9.

在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，所以不可以只寫margin:XXpx!important;
10.IE5 和IE6的BOX解釋不一致
IE5下
div{width:300px;margin:0 10px 0 10px;}
div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改
div{width:300px!important;width :340px;margin:0 10px 0 10px}
關於這個是什麼我也不太明白，只知道IE5和firefox都支援但IE6不支援，如果有人理解的話，請告訴我一聲，謝了！：）
11.

ul標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值所以先定義
ul{margin:0;padding:0;}
就能解決大部分問題

CSS中IE和火狐對margin、padding的相容性解析

CSS中IE和火狐對margin、padding的相容性解析

使用css前處理器sass輕鬆生成margin、padding四個方向多個值的css樣式程式碼

webform中Session和Cookies對象的用法、登錄保持

css的margin、padding和佈局定位

new Date 計算出當前日期後n天的日期以及根據兩個日期，計算出一共經歷了幾天 (包含了在ie和火狐中的相容)

IE和火狐的css相容性問題歸總

5、css中vh和vw的屬性

C#中struct的位元組對齊、轉換操作和複製為二進位制資料(byte[])

css中em和rem的區別

回車登錄（支持IE 和火狐等瀏覽器）

css中before和after的應用實例

IE和DOM事件流、普通事件和綁定事件的區別

愛創課堂每日一題八十九天- CSS中link和@import的區別是：

CSS屬性margin、padding的區別

CSS中可以和不可以繼承的屬性

python 視圖 (FBV、CBV ) 、Request 和Response對象、路由系統

Mybatis中javaType和jdbcType對應和CRUD例子

C++中指標和引用的區別、以及引用和取地址符&的區別

詳解CSS中的幾種長度px、em、pt

CSS中實現文字兩端對齊的方法，登陸註冊介面經常用到

CSS中IE和火狐對margin、padding的相容性解析

相關推薦