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

1.目前來說對(duì)css支持最好的公認(rèn)的是火狐瀏覽器，錯(cuò)位的原因在css代碼書寫不規(guī)范。

成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10年，專業(yè)且經(jīng)驗(yàn)豐富。10年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn)，我們已為1000+中小企業(yè)提供了網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站解決方案，按需定制，設(shè)計(jì)滿意，售后服務(wù)無憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

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

3.對(duì)css縮寫的支持問題：

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

但對(duì)于四個(gè)邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會(huì)出現(xiàn)邊界解釋錯(cuò)誤，而導(dǎo)致頁面變形正確縮寫：border-width:0px 1px 2px 3px;

border-style:solid;

border-color:#fff;

第二點(diǎn)是 ie對(duì)于css的magin padding 等默認(rèn)值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯(cuò)位。

IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理

2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行

3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width

5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上

6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行

7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。

9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}

注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：div{maring:30px;margin:28px}

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

有兩種方法：

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

例如：

padding: 20px !important; /For Firefox/

padding: 10px; /For IE/

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

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

注意：

gt: greater than （高于）

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

另外：IE還支持一個(gè)非標(biāo)準(zhǔn)的標(biāo)簽：comment

This is not Internet Explorer.

This is Internet Explorer.

IE會(huì)自動(dòng)把此標(biāo)簽中的內(nèi)容當(dāng)作注釋處理掉。

擴(kuò)展資料

關(guān)于css兼容性問題及一些常見問題

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

1、有浮動(dòng)存在時(shí)，計(jì)算一定要精確，不要讓內(nèi)容的寬高超出我們所設(shè)置的寬高，IE6下，內(nèi)容會(huì)撐開設(shè)置好的高度。

解決方法：給對(duì)應(yīng)的父級(jí)加overflow:hidden;但是會(huì)有部分被隱藏掉，最好是精確計(jì)算寬高再設(shè)定。

2、在IE6下有元素浮動(dòng)時(shí)，如果寬度需要由內(nèi)容撐開，就給里邊的塊元素都加浮動(dòng)，正常瀏覽器不用加浮動(dòng)。

3、在IE6下元素的高度的小于19px的時(shí)候，會(huì)被當(dāng)做19px來處理。

解決辦法：添加overflow:hidden;

常見的css瀏覽器兼容性問題有哪些，如何解決

瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的margin和padding不同 問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin 和padding差異較大。 碰到頻率:100% 解決方案： CSS里加一行 1 *{margin:0;padding:0;} 備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符*來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。 瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大 問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍? 碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到，float布局最常見的瀏覽器兼容問題） 解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性 備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題。 瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度 問題癥狀：IE6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度 碰到頻率：60% 解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。 備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。 瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況，IE6間距bug 問題癥狀：IE6里的間距比超過設(shè)置的間距 碰到幾率：20% 解決方案：在display:block;后面加入display:inline;display:table; 備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后，在IE6下，他就具有了塊屬性float后的橫向margin的bug。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:talbe。 瀏覽器兼容問題五：圖片默認(rèn)有間距 問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了問題一中提到的通配符也不起作用。 碰到幾率：20% 解決方案：使用float屬性為img布局 備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用） 瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容 問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容 碰到幾率：5% 解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;} 備注：在B/S系統(tǒng)前端開時(shí)，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題。 瀏覽器兼容問題七：各種特殊樣式的兼容，比如透明度、圓角、陰影等。特殊樣式每個(gè)瀏覽器的代碼區(qū)別很大，所以，只能現(xiàn)查資料通過給不同瀏覽器寫不同的代碼來解決。 JS解決IE6下png透明失效的問題 做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會(huì)碰到兼容性問題的新手使用。很多兼容性問題都是因?yàn)闉g覽器對(duì)標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話，就能很好的理解為什么會(huì)出現(xiàn)兼容問題以及怎么去解決這些兼容問題。

急救啊 我的css樣式為啥在火狐瀏覽器中不能使用 在其他的瀏覽器沒有一點(diǎn)的錯(cuò)誤 為什么啊

有以下2種情況會(huì)導(dǎo)致該問題：

1、典型的css兼容問題，即該組css樣式中使用了火狐瀏覽器不兼容的屬性，導(dǎo)致樣式無法生效；

2、火狐瀏覽器的誤設(shè)置，將css樣式關(guān)閉。開啟方式：菜單-查看-頁面樣式，選擇為“基本頁面樣式”即可。