CSS 瀏覽器兼容寫法

1. Z-INDEX: 300;

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括黃驊網(wǎng)站建設(shè)、黃驊網(wǎng)站制作、黃驊網(wǎng)頁制作以及黃驊網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，黃驊網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到黃驊省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

Z-INDEX 是層疊順序，當(dāng)你設(shè)置了POSITION: absolute;的時候，這個層疊順序才起作用。你有兩個層一個是Z-INDEX: 299;令一個是Z-INDEX: 300;那么Z-INDEX: 300;的會覆蓋在上邊。

2.. POSITION: absolute;

這個就是絕對定位。

3. 當(dāng)你設(shè)置了絕對定位以后，你必須給這個層設(shè)置它的位置，如果你不設(shè)置的話，他就會出現(xiàn)在瀏覽器給他的默認(rèn)位置，而每個瀏覽器設(shè)置的默認(rèn)位置是不同的，所以你需要給他一個確定的TOP 和 LEFT位置，在所有瀏覽器下就能出現(xiàn)在固定位置了。也就是你說的兼容了。

如何在同一css中寫兼容IE7和IE8的CSS樣式

大部分樣式不用考慮兼容性問題。除了幾個特例以外?？梢栽趯傩院竺婕尤?,_,\9 之類的css hack 來針對不同游覽器 相關(guān)內(nèi)容可以搜索百度文庫，或一些相關(guān)文章。這里不可能說清楚的。。多煉就好~！

有關(guān)css樣式解決瀏覽器兼容

轉(zhuǎn):

1.ie8下兼容問題，這個最好處理，轉(zhuǎn)化成ie7兼容就可以。在頭部加如下一段代碼，然后只要在IE7下兼容了，IE8下面也就兼容了

meta http-equiv="x-ua-compatible" content="ie=7" /

2.flaot浮動造成IE6下面雙倍邊距問題，這個最常見，也最好處理，!important解決，比如

margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;

margin-left:5px;/*IE6下屬性寫的是5PX，但在顯示出來的是10px

3.清除塊display，這個可以解決浮動造成的塊，造成塊后，當(dāng)DIV背景填色或填圖片的時候，會出現(xiàn)背景斷開或差一小塊。這種兼容出現(xiàn)的不太多，我做到現(xiàn)在，只遇到過兩次，方法是在出現(xiàn)兼容的DIV的CSS中寫一個display:block，或其它屬性，中文什么意思我不知道，我英語差，但能達(dá)到想要的效果，6 e" Z+ e% |8 G# |

4.很多朋友DIV+CSS的時候，會出現(xiàn)，在IE的幾個瀏覽器下都好了，但是在FF出問題了，用!important又會把IE7做的不兼容，很頭疼，在想，有沒有什么方法只對FF下進(jìn)行操做，我用過這個方法，感覺得是百試不爽，就是在屬性前面加符號如：*、，￥，#，@，—，+，加過符號的屬性只有IE的瀏覽器才識別，而FF不識別，方法如下(注意有符號的屬性和沒符號的屬性的順序)

height:100px;/*FF下顯示100的高*/

+height:120px;/*IE678下顯示120高*/

5.有時候，會在布局的時候，發(fā)現(xiàn)，有一個DIV浮動了，接下來的一個DIV本來是要在下面顯示的，結(jié)果跑上面去了，這種情況一般在FF下面會出現(xiàn)，解決的辦法就是清除一下浮動，在設(shè)置過浮動的那個DIV下面加一個DIV，CSS面寫個clear:both;如下div style="float:left;height:100px; width:500px;"

div style="clear:both;"

div style="height:100px; width=300px"

6. 再就是居中問題，這個問題在新手身上很多，主要原因是對盒子模型不夠理解，沒熟記盒子模型，如果發(fā)現(xiàn)你的頁面沒有局中，我現(xiàn)在知道的，有這幾個原因：1. 一個是沒盒子，就是BODY后的一個大DIV把所有DIV裝起來的那個，你沒寫。2.就是你寫了，但是寬度沒用絕對寬度：而是用一個相對的寬度，想局中，必須用絕對寬度。-

7.擴(kuò)展：如果我想在設(shè)計的時候，實(shí)現(xiàn)IE6，IE7,FF下出現(xiàn)三種不同的效果，比如IE6下背景紅色，IE7下藍(lán)色FF下綠色，這里，我自己試過，可以，用兼容的方法（注意順序，可以好好理解一下）。7 L t- o7 k- a1 I

background:red;/*FF里顯示的紅色*/

+background:blue !important;/*IE7下面顯示的藍(lán)色*/

+background:green;/*IE6下面顯示的綠色*/

在這里，我想說一下，雖然兼容給你帶來很多郁悶，讓人心煩，但同時，在你做多了后，你會發(fā)現(xiàn)，兼容有時候會滿足你很多不好達(dá)到的效果，就像最后一個，要做那種效果，不用兼容的方法，那你就JS去吧，JS還得想想FF和IE下的不同，當(dāng)然，JS的兼容，我也不會，我沒去研究過。以后的事，先把CSS+DIV學(xué)熟再說。

多做，做練，始終把盒子模型放在心中，才會熟練，才會運(yùn)用自如，才會在做的時候，自然而然就知道哪里會有兼容問題，直接在測試前就解決掉那些最常見的兼容問題。

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

有兩種方法：

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

例如：

padding: 20px !important; /For Firefox/

padding: 10px; /For IE/

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

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

注意：

gt: greater than （高于）

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

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

This is not Internet Explorer.

This is Internet Explorer.

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

擴(kuò)展資料

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

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

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

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

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

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

解決辦法：添加overflow:hidden;

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

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

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

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

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

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

border-style:solid;

border-color:#fff;

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

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

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

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

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

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

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

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

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

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

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

css 急速模式兼容性寫法

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

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