怎么才能讓自己寫的css 樣式 兼容所有瀏覽器呢？

利用 CSS Hack 兼容左右瀏覽器通過CSS Hack解決各瀏覽器的兼容問題，是現在普遍采用的方法。我分享一些常用的CSS Hack寫法。……![endif]-- ……![endif]-- ……![endif]-- ……![endif]--.csshack{ padding:10px; padding:9px\9; /* 所有 ie */ *padding:5px; /* ie6和ie7 */ +padding:7px; /* ie7 */ _padding:6px; /* ie6 */ }這些是比較常用的CSS Hack寫法，可以解決大部分兼容問題。

創新互聯建站作為成都網站建設公司，專注重慶網站建設公司、網站設計，有關成都企業網站定制方案、改版、費用等問題，行業涉及成都圍欄護欄等多個領域，已為上千家企業服務，得到了客戶的尊重與認可。

css3中的樣式兼容性問題怎么弄？

1.目前來說對css支持最好的公認的是火狐瀏覽器，錯位的原因在css代碼書寫不規范。

2.兼容性：對于CSS（樣bai式表）并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對于CSS的支持就不是很好。而現在使用IE5以前版本瀏覽器的用戶不在少數，這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試，以保證兼容性，無形中也增加很多工作量（至少我接觸的開發人員制作div頁面比table頁面的標準時間要長一些）。

3.對css縮寫的支持問題：

不論是ie 還是ff對css的縮寫都有一小點問題比如border: 0xp solid #fff;兩個瀏覽器支持都沒有問題

但對于四個邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會出現邊界解釋錯誤，而導致頁面變形正確縮寫：border-width:0px 1px 2px 3px;

border-style:solid;

border-color:#fff;

第二點是 ie對于css的magin padding 等默認值為0px，但ff卻不一樣，為了保持外觀的統一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯位。

IE與Firefox的CSS兼容大全 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 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上

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}

css 急速模式兼容性寫法

添加一個兼容webkit的樣式，即可支持極速模式，方法如下：

html?{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:?grayscale(100%);}

怎么解決瀏覽器的css樣式兼容問題

有兩種方法：

1、在同一個CSS樣式表中，使用 !important 來定義不同的值以適應Firefox和IE。

例如：

padding: 20px !important; /For Firefox/

padding: 10px; /For IE/

（注意這里IE6是無法識別，important 這個標記的，但它會識別padding: 20px，所以要在后面加上padding: 10px用來覆蓋padding: 20px）這個方法適用于修改少量代碼。

2、條件注釋。（只對IE瀏覽器有效）這也是北極冰仔部落格目前使用的方法。先為不同瀏覽器書寫各自的CSS樣式，再在head中加入以下的代碼以適應不同的IE瀏覽器版本調用：

注意：

gt: greater than （高于）

lte: less than or equal to （低于或等于）

另外：IE還支持一個非標準的標簽：comment

This is not Internet Explorer.

This is Internet Explorer.

IE會自動把此標簽中的內容當作注釋處理掉。

擴展資料

關于css兼容性問題及一些常見問題

目前主流瀏覽器的兼容性做的都比較好了，以下主要針對IE6，7的不兼容問題進行解決。

1、有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下，內容會撐開設置好的高度。

解決方法：給對應的父級加overflow:hidden;但是會有部分被隱藏掉，最好是精確計算寬高再設定。

2、在IE6下有元素浮動時，如果寬度需要由內容撐開，就給里邊的塊元素都加浮動，正常瀏覽器不用加浮動。

3、在IE6下元素的高度的小于19px的時候，會被當做19px來處理。

解決辦法：添加overflow:hidden;

關于兼容各瀏覽器的CSS樣式

以下兩種方法幾乎能解決現今所有HACK.

1, !important

隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)

style

#layout

{

width: 100px!important; /* IE7+FF */

width: 80px; /* IE6 */

}

/style

2, IE6/IE77對FireFox

*+html 與 *html 是IE特有的標簽, firefox 暫不支持.而*+html 又為 IE7特有標簽.

style

#layout{ width: 120px; } /* FireFox */

*html #layout { width: 80px;} /* ie6 fixed */

*+html #layout { width: 60px;} /* ie7 fixed, 注意順序 */

/style

注意:

*+html 對IE7的HACK 必須保證HTML頂部有如下聲明：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"