css處理瀏覽器兼容技巧總匯

日期：2013-12-16  來源：攀枝花惠康網絡公司

圖2

css里關于瀏覽器的兼容問題一向思疑著我們初級的css用戶（高手可直接繞過），這里想按照我前段時刻拜讀的李超的書籍《css網站結構實錄》里學到的有關措置瀏覽器兼容的問題，按照我前段時刻在公司minisite項目里碰著的一些問題息爭決體例分享給巨匠。瀏覽器兼容性的問題，我想一向是困繞我們設計師的棘手問題，css的可貴就在這里。解決好這個問題，我想你的css水平必然會獲得年夜步的晉升。

自年夜W3C尺度推出往后，此刻新的一些瀏覽器多多少少在使用這套web的新尺度，但在各自對新尺度的執行上并不統一，這就給我們設計師帶來良多的問題。今朝世面上主流的瀏覽器仍是IE和firefox,這兩個瀏覽器幾乎占領著整個瀏覽器的市場。而IE下面年夜部門人在用IE6和IE7兩個版本的瀏覽器，而這兩個版本對css的撐持有很是多的差異之處，這種差異是最需要我們設計師注重的，因為它跟我們的日常設計互相關注。我在現實的建造過程傍邊碰著的問題有絕年夜部門是呈此刻IE6和IE7的css兼容性問題上。IE6，IE7在加上firefox2.0，如不美觀能把這三個瀏覽器都搞定了，也就根基上知足95%以上的用戶了。不才面我列舉了一些我在項目里碰著的現實的問題息爭決的體例，其中有良多是css高手GL的措置思緒息爭決體例，很是值得吸收和借鑒，因為這為我們解決此后碰著近似的問題供給解決問題的思緒。建議先閱讀《css網站結構實錄》這本書，此刻出了新版本《css網站結構實錄2》，要細心閱讀哦，相信我，簡直能讓你收益非淺。下面列舉一些事例，但愿能給巨匠供給一些借鑒：

A: IE6/IE7 div等塊對象默認具有高度

圖A

圖C

如圖，膳縵沔是IE6.0里的顯示，下面是IE7.0和firefox2.0,紅色div設置為float:left;圖片在寬度正好的情形下，在IE7和firefox下可以上去，而在IE6瑯縵沔就被顯示在了第二行。這就是IE6的聞名的3px現象，當一個對象設置為左懸浮，這個 塊對像跟它右邊浮上來的對象默認具有3px的margin, 解決的體例是針對于IE6，在css里寫一個css hack, 如在左邊的div上加：margin-right:0px!important;margin-right:-3px;!important這個標識表記標幟IE7和firefox是撐持的，而我們偉年夜的IE6卻置若罔聞，我們就可以按照這個特點，讓左div針對IE6有一個-3px的右margin,而IE7和firefox為0。

< div style=”width:502px;height:80px;border:1px solid #000;”>< div style=”width:250px;background-color:#ff0000;height:60px;float:left;margin-right:0!important;margin-right:-3px;”>< /div>img< /div >

這是我在具體做項目時現實碰著的問題，解決這個問題的思緒和體例來自GL的撐持，我把它清算出來分享，但愿能給你有所輔佐。

圖1

看下面圖1，此刻一共有divA, divB, divC, divD, divE這么５個div,　方針是讓divD和divE移上去，跟divA其行顯示，達到圖２的效不美觀。我在那時實現的時辰，在divA,divB,divC里分袂加上style=”float:left;clear:both”,這樣在IE6和IE7誠懇現了圖2的效不美觀，但在firefox里就呈現了圖3的顯示，我在那時試過良多體例, 如在div4里寫float:right;讓div4有懸浮，想讓它上去，這樣只能跟divC并列顯示。對css感樂趣的人可以先自己試試，其實體例很是簡單，給div4和div5分袂設置個左邊距如margin-left:380px;就解決了。這個例子解決起來其實很簡單，這里是供給一種解決css兼容問題上的一種思緒。

一些問題是瀏覽器自身的問題，碰著問題發生無法避免的情形下，那就要考慮使用一些css hack了，以下是針對IE6,IE7和firefox可以使用的一些css hack:

圖1

圖2

D: 若何讓圖片在div里擺布居中，上下居中
如下圖1， 我們要讓圖片在IE6，IE7和firefox下圖片相對div擺布居中，上下居中來顯示如圖2，這是眾多設計師可能都要面臨要解決的問題，因為這種體例我們經常要用到。這里把解決的體例分享給巨匠，要想讓圖片擺布對齊，我們可以在div里寫入”style:text-align:center;”,擺布居中問題好解決，此刻看一下，IE6,IE7和firefox里，圖片都已經是擺布居中了，手藝的可貴是若何讓圖片在三個瀏覽器垂直居中。年夜部門人可能會考慮使用vertical-align:middle來使圖片居中，加上去看看沒有呈現效不美觀，這里我們針對圖片設置如下代碼：style=”_margin-top: expression(( 300 – this.height ) / 2);發此刻IE6下效不美觀實現了，再看看IE7和firefox, 沒有轉變，這里我們針對IE7和firefox來設置，在div里寫入line-height:300px;vertical-align:middle,發現IE7這時辰也有用不美觀了，這里的line-height:300px;是按照div的高度定的，如不美觀div的高度為100px,則這里設置line-height:100px,這里我們設置為300px。那么，這時辰IE解決了，看一下firefox圖片還沒垂直居中，再對div增添樣式:display:table-cell,此刻再看看firefox也好了。

B: IE6下塊對象默認的3PX現象

圖2

參考代碼：
< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
< img src=http://www.css88.com/archives/”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 – this.height ) / 2);” />

有樂趣的可以拷貝下面代碼自己請手去試一下:(考慮在blog里顯示的問題，下面代碼酬報增添了一些空格，請copy的時辰自行刪去)
< /div >

E: IE捉迷藏現象
捉迷藏問題是IE很是典型的對css撐持上的bug, 問題首要呈此刻IE6瀏覽器。當div嵌套結構稍微復雜時，就會呈現捉迷藏情形。如下面例子：

圖3

開初我們寫上斗勁簡單的結構代碼，如下：

padding:5px;

膳縵沔代碼很是簡單，此刻我們在瑯縵沔考試考試增添一些內容：

圖B

為了讓bug顯示，我們給膳縵沔的xhtml寫上css樣式，如下：

然后我們到IE7.0 firefox里先后去預覽一下，顯示一切正常，如下圖1。

圖1

我們再到IE6去打開它，發此刻剛剛打開的時辰，看到如下圖2的情形，右側的內容奇異的消逝蹤了。全選頁面內容，發現右側內容是存在的，如不美觀用鼠標移到鏈接膳縵沔，右側的內容又跑了出來，這就是IE6聞名的捉迷藏現象。不僅在今朝事例中，在其他情形下也可能呈現。造成這種現象的具體觸發機制今朝還不能合理的歸類，至今為止，這種情形只在IE6下呈現。

解決這個問題的體例，可以參考positioniseverything.net的網站專家給出的一些建議：
a: 在代碼的下面使用一個帶有< div style=”clear:both;”>< /div >這樣的div來斷根懸浮
b: 如不美觀有可能，給layout對象設定width和height
c: 可以考試考試給layout和left對象使用position:relative
d: 對layout使用line-height屬性，強制瀏覽器對內容文字進行行距調整。

以上是供給解決瀏覽器問題的一些技巧，positioniseverything.net網站專家的建議，更主要的是要養成精采的編碼習慣來預防捉迷藏情形的發生。

a: 針對區別IE6 和IE7/firefox, 可以在要區此外代碼后面跟上!important
[xmlns] #left {
float:left;
border:4px solid #999;
width:200px;
height:200px;

}
c: 只針對IE6起浸染，可以在css前面加* html,如:
* html #left {
clear:both;
}

b:針對IE7/firefox 在css的前面加 [xmlns], 如下面的left屬性，如不美觀我想要只針對IE7/firefox起浸染，寫法如下：

d: 只針對IE7起浸染，在css里前面加*+html,如:
*+html #left {
clear:both;

C: 圖層float實現頁面結構，碰著的瀏覽器問題
下面圖A是IE6里的一個div, 寬度是420px,沒有設置高度, 其在IE6/IE7瀏覽器里,默認DIV具有了一個br的高度,圖B是在firefox2.0下顯示,div無高度。這樣就給我們設計師在現實建造過程傍邊帶來問題，因為有的時辰我們要設置一個div高度為5px，用于放置一張布景圖片，在IE6里就會有問題。IE6的顯示連結在了最低高度一個br，如圖c，在同樣設置height:5px;情形下，膳縵沔是firefox顯示下面是IE6。解決的體例是在div里設置一下line-height:0px;

}