您的位置:網站首頁 > 新聞原創 > 津市網站開發

web前端開發中瀏覽器兼容性相關問題解決方式

日期:2016-12-14 11:16:36 人氣: 標簽:
分享到:
各瀏覽器之間
為了能讓網站前端開發正常的運行于各種瀏覽器平臺,網站設計師們不得不想盡辦法處理好網站建設中的瀏覽器兼容問題。正是因為網站設計當中的這一需要產生了一項新技術— CSS Hack。
CSS Hack 就是針對不同瀏覽器寫出不同的 CSS code 的過程,主要用來解決目前各類瀏覽器無法標準解析CSS樣式,導致同一網站設計頁面在不同瀏覽器下出現顯示效果不一致的兼容問題。 針對不同瀏覽器,可以將CSS Hack 網站設計代碼整理如下:
1、針對I E 系列瀏覽器的網站設計代碼
針對 IE 6 的專屬 CSS Hack 網站設計代碼 #id{ _display: block; } 也就是在網站設計CSS屬性前加一個小劃線就好。
針對 IE 7 的專屬 CSS Hack 網站設計代碼 #id{ *display: block; } 即在網站設計CSS屬性前加上一個星號即可 針對 IE 8 的專屬 CSS Hack 網站設計代碼 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示,解決辦法為在網站設計CSS屬性后分號前加上空格與斜線并加入一個數字9即可 。
2、針對火狐的CSS Hack 網站設計代碼
火狐可謂是最標準的瀏覽器之一了,網站設計技術只要稍稍不到位就能體現得淋漓盡致,所以不少前端工程師也很頭痛,其實想要解決火狐的兼容性除了要把網站設計的基礎知識扎牢之外只要將CSS代碼寫入到下圖 @-moz-document url-prefix(){ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3、針對 Safari 的CSS Hack 網站設計代碼
Safari是蘋果計算機的最新作業系統Mac OS X中新的瀏覽器,用來取代之前的Internet Explorer for Mac,使用了KDE的KHTML作為瀏覽器的運算核心。@media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4、針對 Opera 的CSS Hack 網站設計代碼
Opera即Opera Software ASA,是臺式機、各種設備和移動網絡瀏覽器市場的商業領袖,因快速、小巧和比其他瀏覽器更佳的標準兼容性獲得了國際上的最終用戶和業界媒體的承認,并在網上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 這個世界上必然不會存在絕對完美的事物,因此運用以上方法讓我們的網站設計更好的與各種瀏覽器兼容的時候其實已經違反了網站制作的W3C標準。
瀏覽器兼容問題一:
不同瀏覽器的標簽默認的margin和padding不同 問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率:100%;
解決方案: CSS里加一行 1 *{margin:0;padding:0;}
備注:這個是最常見的也是最易解決的一個瀏覽器兼容性問題,幾乎所有的CSS文件開頭都會用通配符*來設置各個標簽的內外補丁是0。
瀏覽器兼容問題二:
塊屬性標簽float后,又有橫行的margin情況下,在IE6顯示margin比設置的大問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行,碰到頻率:90%(稍微復雜點的頁面都會碰到,float布局最常見的瀏覽器兼容問題)
解決方案:在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注:我們最常用的就是div+CSS布局了,而div就是一個典型的塊屬性標簽,橫向布局的時候我們通常都是用div float實現的,橫向的間距設置如果用margin實現,這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三:
設置較小高度標簽(一般小于10px),在IE6,IE7,遨游中高度超出自己設置高度 ;
問題癥狀:IE6、7和遨游里這個標簽的高度不受控制,超出自己設置的高度,碰到頻率:60%;
解決方案:給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
備注:這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的,這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四:
行內屬性標簽,設置display:block后采用float布局,又有橫行的margin的情況,IE6間距bug
問題癥狀:IE6里的間距比超過設置的間距,碰到幾率:20% ;
解決方案:在display:block;后面加入display:inline;display:table;
備注:行內屬性標簽,為了設置寬高,我們需要設置display:block;(除了input標簽比較特殊)。在用float布局并有橫向的margin后,在IE6下,他就具有了塊屬性float后的橫向margin的bug。不過因為它本身就是行內屬性標簽,所以我們再加上display:inline的話,它的高寬就不可設了。這時候我們還需要在display:inline后面加入display:talbe。
瀏覽器兼容問題五:
圖片默認有間距
問題癥狀:幾個img標簽放在一起的時候,有些瀏覽器會有默認的間距,加了問題一中提到的通配符也不起作用, 碰到幾率:20%;
解決方案:使用float屬性為img布局
備注:因為img標簽是行內屬性標簽,所以只要不超出容器寬度,img標簽都會排在一行里,但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。(我的一個學生使用負margin,雖然能解決,但負margin本身就是容易引起瀏覽器兼容問題的用法,所以我禁止他們使用) 。
瀏覽器兼容問題六:
標簽最低高度設置min-height不兼容
問題癥狀:因為min-height本身就是一個不兼容的CSS屬性,所以設置min-height時不能很好的被各個瀏覽器兼容,碰到幾率:5%;
解決方案:如果我們要設置一個標簽的最小高度200px,需要進行的設置為:{min-height:200px; height:auto !important; height:200px; overflow:visible;} ;
備注:在B/S系統前端開時,有很多情況下我們又這種需求。當內容小于一個值(如300px)時。容器的高度為300px;當內容高度大于這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
瀏覽器兼容問題七:
各種特殊樣式的兼容,比如透明度、圓角、陰影等。特殊樣式每個瀏覽器的代碼區別很大,所以,只能現查資料通過給不同瀏覽器寫不同的代碼來解決。
JS解決IE6下png透明失效的問題做兼容頁面的方法是:每寫一小段代碼(布局中的一行或者一塊)我們都要在不同的瀏覽器中看是否兼容,當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的,只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話,就能很好的理解為什么會出現兼容問題以及怎么去解決這些兼容問題。
其他
兼容性處理要點
1、DOCTYPE 影響 CSS 處理
2、FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
3、FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式
4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字,就垂直居中了。缺點是要控制內容不要換行
5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法:
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反,!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:
div{maring:30px;margin:28px}
重復定義的話按照最后一個來執行,所以不可以只寫margin:XXpx!important;
瀏覽器差異
1、ul和ol列表縮進問題
消除ul、ol等列表的縮進時,樣式應寫成:list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效,padding屬性對FireFox有效。
[注]經驗證,在IE中,設置margin:0px可以去除列表的上下左右縮進、空白以及列表編號或圓點,設置padding對樣式沒有影響;在 Firefox 中,設置margin:0px僅僅可以去除上下的空白,設置padding:0px后僅僅可以去掉左右縮進,還必須設置list- style:none才 能去除列表編號或圓點。也就是說,在IE中僅僅設置margin:0px即可達到最終效果,而在Firefox中必須同時設置margin:0px、 padding:0px以及list-style:none三項才能達到最終效果。
2、CSS透明問題
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
[注] 最好兩個都寫,并將opacity屬性放在下面。
3、CSS圓角問題
IE:ie7以下版本不支持圓角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圓角問題是CSS中的經典問題,建議使用JQuery框架集來設置圓角,讓這些復雜的問題留給別人去想吧。不過jQuery的圓角只看到支持整個區域的圓角,沒有支持邊框的圓角,不過這個邊框的圓角可以通過一些簡單的手段來實現,下次有機會介紹下。
4、cursor:hand VS cursor:pointer
問題說明:firefox不支持hand,但ie支持pointer ,兩者都是手形指示。
解決方法:統一使用pointer。
5、字體大小定義不同
對字體大小small的定義不同,Firefox中為13px,而IE中為16px,差別挺大。
解決方法:使用指定的字體大小如14px。
并列排列的多個元素(圖片或者鏈接)的div和div之間,代碼中的空格和回車在firefox中都會被忽略,而IE中卻默認顯示為空格(約3px)。
6、CSS雙線凹凸邊框
IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
瀏覽器bug
1、IE的雙邊距bug
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。
解決方案:在這個div里面加上display:inline;
0
0
0
0
0
0
0
0
網友評論 Comments
下一篇:沒有資料