web前端開發瀏覽器兼容性 - 持續更新

瀏覽器兼容性問題又被稱爲網頁或網站兼容性問題；不一樣瀏覽器內核及所支持的html等網頁語言標準不一樣，不一樣客戶端環境（如分辨率不一樣）形成實際顯示效果未能達到預期理想效果

首先咱們來看一下目前市面上常見的一些瀏覽器：ie、chrome、firefox、safari、opera、maxthon、360、qq、yy、uc、sogou、234五、淘寶、獵豹、世界之窗等

其中表現很出色的有chrome、firefox、safari等；而表現極差的就是ie6/7內核瀏覽器了，咱們的兼容性工做大半都是圍繞這兩個瀏覽器內核展開

咱們的常規處理方式是調試各瀏覽器網頁顯示效果、使用成熟的前端開發框架、運用css與hack技巧等

 

常見hack技巧

css

_：ie6內核瀏覽器識別

color:#333;_color:#999;

*：ie7及其如下內核瀏覽器識別

color:#333;*color:#999;

\：如\9意爲ie9及其如下內核瀏覽器識別

color:#333;color:#999\9;

!important：多內核瀏覽器識別，做用爲強制此屬性值

color:#333 !important;

這幾個最經常使用的數量雖然很少，可是夠用並且很管用；可是咱們的遵循原則是能不用就不用

 

html

ie內核瀏覽器識別

<!--[if IE]><![endif]-->

ie6內核瀏覽器識別

<!--[if IE 6]><![endif]-->

ie7及其以上內核瀏覽器識別

<!--[if gte IE 7]><![endif]-->

ie7及其如下內核瀏覽器識別

<!--[if lte IE 7]><![endif]-->

非ie內核瀏覽器識別

<!--[if !IE]><![endif]-->

非ie7及其如下內核瀏覽器識別

<!--[if !(lte IE 7)]><!-->

 

常見瀏覽器兼容性問題及解決方案

height低像素值無效

瀏覽器環境：ie6

height:5px;

height高度實際表現爲大於5像素，問題產生是由於ie6下容器默認行高的影響；爲高度太低元素添加溢出部分隱藏屬性便可

height:5px;overflow:hidden;

 

margin值雙倍邊距

瀏覽器環境：ie6

margin:0 10px;float:left;

margin左右邊距實際表現爲20像素，問題通常發生於浮動元素，緣由是ie6下浮動元素margin值默認變成雙倍；爲浮動元素添加行間元素屬性便可，優化了同行元素的排版表現

margin:0 10px;display:inline;float:left;

或爲浮動元素添加ie6專有屬性

margin:0 10px;_margin:0 5px;float:left;

 

max-width、min-width、max-height、min-height等屬性無效

瀏覽器環境：ie6

max-width:1280px;
min-width:980px;
max-height:800px;
min-height:600px;

最大最小寬高屬性在網頁須要它出現時並無給面子，問題緣由是ie6不支持；解決辦法是使用expression來實時獲取元素當前適合寬高

max-width:1280px;_width:expression(documentElement.clientWidth > 1280 ? "1280px" : "auto");
min-width:980px;_width:expression(documentElement.clientWidth < 980 ? "980px" : "auto");
min-height:800px;_height:expression((documentElement.clientHeight || document.body.clientHeight) > 800 ? "800px" : "");
min-height:600px;_height:expression((documentElement.clientHeight || document.body.clientHeight) < 600 ? "600px" : "");

網頁實際狀況各不相同，各位在根據需求處理具體頁面時請本身提好褲子認真測試

 

fixed屬性值無效

瀏覽器環境：ie6

position:fixed;top:100px;left:10px;

預想中的懸掛效果並無出現，緣由很簡單ie6根本不支持；咱們的解決辦法是改變元素的懸掛爲定位並使用expression來實時處理元素當前顯示位置

position:fixed;_position:absolute;top:100px;_top:expression(documentElement.scrollTop + 100 + "px");left:10px;

expression工做時的表現仍是能夠接受，惟一的缺點是性能

 

定位元素上下或左右屬性同時賦值時無效

瀏覽器環境：ie6

position:absolute;top:0;bottom:0;left:0;right:0;

畫布實際表現爲並無按預想的全屏伸展開，問題產生緣由是ie6下上下或左右定位屬性同時存在時只識別上與左；爲元素賦於寬高屬性便可

width:100%;height:100%;position:absolute;top:0;left:0;

問題到此並無獲得徹底解決，事實上，不少狀況下，咱們所但願的定位元素的寬高並不是正好爲100%

position:absolute;top:30px;bottom:50px;left:20px;right:20px;

這時css的能力彷佛顯得捉襟見肘，想拿出一個合適的寬高屬性就無從下手了；咱們只好經過css與js合做來處理

position:absolute;top:30px;left:20px;

var w = $(window).width() - 40;
var h = $(window).height() - 80;
$('#object').css({'width':w,'height':h});

有人問，resize時候不行了，你都知道網頁resize了你還不知道resize事件捕捉到後怎麼辦麼

 

透明png格式圖片的背景問題

瀏覽器環境：ie6

網頁上的糟糕表現爲出現了灰背景，緣由是ie6不支持png透明或png8及其以上的alpha透明度；網上的解決辦法不少，javascript辦法最多但都有通病，自己加載時間與之帶來的網頁負載，尤爲是在網頁自己負載就很大或網頁上有過多須要處理的png圖片的狀況，會致使原本性能就很差的ie6瀏覽器明顯停滯甚至崩潰，因此這裏咱們推薦的是css與圖形處理兩種純自然處理方式，首先來看css濾鏡處理

background:url(../images/logo.png) no-repeat 50%;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png");

看上去一切都很美好，就是不能應用於img標籤，其次是不能拼圖因此也就不支持css sprite；咱們再來看圖形處理，使用工具爲fireworks而非photoshop（實際上是咱們並不知它怎麼實現一樣操做），首先爲打開的png圖片的畫布吸收圖片四周最相近的背景色

而後打開圖像預覽，選擇gif格式的索引色透明或alpha透明度導出，或選擇png8格式的索引色透明導出便可；如今大家應該懂了，樓主不知道photoshop是否能夠在圖片導出時順便附帶上畫布背景色

 

width等百分比值計算時有誤

瀏覽器環境：ie6/7

width:25%;

如剛好有4個該元素充滿外部容器，外容器寬度不是恰到好處時實際寬度會溢出，第4個元素會換行，問題的產生是由於ie6/7網頁計算自適應處理能力不足；較爲穩妥的處理方案是爲ie6/7少量減小寬度

width:25%;*width:24%;

 

td內爲空時，容器沒法佔據理想狀態下應占據的位置

瀏覽器環境：ie6/7

<td></td>

頁面上表現是該元素和其它同類相比不正常，由於瀏覽器處理該問題時不夠智能；爲td插入一個不可見的空格佔位符便可

<td>&nbsp;</td>

 

position屬性使用過多或使用位置不恰當引發滾動時頁面錯亂

瀏覽器環境：ie7

position:relative;

網頁上最直接表現就是極具破壞性的滾動錯位，問題產生來自ie7自身渲染解析出錯；這個問題的解決方案沒有具體的代碼，儘可能避免在過多層級中使用該屬性，絕對禁止爲無須要無做用元素添加該屬性，如tr、td等

 

容器內純英文文本過長且無空格等符號時不能自動換行

瀏覽器環境：多瀏覽器

<p>abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc</p>

屬於極端操做行爲，問題來自各瀏覽器自己，添加2個word屬性便可

word-break:break-all;word-wrap:break-word;

或者不換行，超出部分顯示爲更多

overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

這2個辦法各有優劣，使用時都需根據網頁上具體狀況而定

 

元素有margin上邊距值且處於最前或下邊距值且處於最後，外部容器高度不能自適應

瀏覽器環境：多瀏覽器

margin:20px 0 0;

外容器沒有按理想情況自適應撐開，從內間隙變成了外間隙，突出表如今外容器有背景色等特徵可被明顯觀察時；根據狀況更換元素或外容器的margin爲padding

padding:20px 0 0;

或者根據實際狀況給外容器添加浮動屬性

 

老生常談的清浮動

瀏覽器環境：多瀏覽器

問題沒什麼要描述的直接上解決代碼

.clearfix:after{height:0;display:block;content:".";visibility:hidden;clear:both;}
.clearfix{zoom:1;}
.clear{height:0;overflow:hidden;font-size:0;clear:both;}

如使用清浮動樣式的元素處於頁面最底部，會給頁面底部帶來一小段空隙，發生該狀況時需及時調整注意避免

 

懸掛元素工做時表現失常，頁面滾動時有明顯的停頓抖動

瀏覽器環境：多瀏覽器

position:fixed;

本來該吸附在頁面上的元素並無使人滿意的工做，緣由是網頁帶給瀏覽器的性能消耗過大如網頁上有動畫等；直接辦法是添加一個叫作隱藏被旋轉元素背面的屬性

position:fixed;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;

 

圖片等元素不能自適應垂直居中

瀏覽器環境：多瀏覽器

<p><i><img src="" width="120" height="120" /></i></p>

無需多描述直接上代碼，p與img寬高都可任意改動

p{width:800px;height:800px;display:table-cell;text-align:center;vertical-align:middle;}
p img{position:static;+position:relative;top:-50%;left:-50%;vertical-align:middle;}
p i{position:static;+position:absolute;top:50%;}

 

一個網站尤爲是大型門戶網站的兼容性調試是一項很浩大的工程，耗時耗力耗青春，而且還不必定討好，從事過大項目開發中兼容性調試的同行必定有着和他人不同的體會，箇中滋味實在難以明言

不少人覺得本身懂兼容性，以爲不過如此，隨手能夠作出一個全瀏覽器兼容的網頁

可是一個在兼容性問題上沉浸多年並在大型門戶級網站開發中支持好久的人在兼容性水平的表現上是徹底不同的，兼容性出色的工程師能夠經過部署好本身的代碼，從不少源頭上避免產生兼容性問題的可能性

 

如今的國內市場上，能出色完成ie6/7兼容性工做的人愈來愈少，緣由有不少：不少新加入前端開發的同行，直接依託某web前端開發框架，而且在框架自己的兼容性條件下選擇迴避ie6/7的兼容性工做；而老一輩前端工程師隨着我的發展到必定階段後，有着其它更重要的職能與我的更感興趣的內容，也不會樂意繼續從事該項沒有將來的工做；最後一個重中之重的現實問題，長期支持ie6/7對於前端工程師的我的成長來講的確是一個很不利的因素，畢竟它正處於淘汰進行時，市場佔有量愈來愈少而且不少引領互聯網行業的媒體也開始接受忽略來自ie6用戶的態度