網站首頁 網站建設 公司動態 行業新聞 案例展示 關于我們

文章內容

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這么5個div, 方針是讓divD和divE移上去,跟divA其行顯示,達到圖2的效不美觀。我在那時實現的時辰,在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;


}

文章來源:攀枝花惠康網絡公司

惠康網絡,是一家專業從事攀枝花網站建設,攀枝花網站制作,攀枝花網站設計公司,提供網站建設一條龍服務(網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣),惠康網絡立足攀枝花,輻射全中國,攀枝花惠康網絡的客戶已經遍布國內各地大中小城市,我們高效優質的網站建設服務深受用戶好評。

客服熱線:tel(謝先生)  客服QQ:1323605005  
服務郵箱:[email protected](售前咨詢)  [email protected](技術部)  [email protected](售后服務)
公司地址:四川省攀枝花市
郵編:617200

青海十一选五开奖图