CSS的瀏覽器兼容性研究

摘 要：瀏覽器種類不同、版本不同，對(duì)CSS解析不同，導(dǎo)致同一個(gè)網(wǎng)頁(yè)編碼在不同瀏覽器顯示效果不同，甚至錯(cuò)位。本文主要分析瀏覽器兼容性及CSSHach技術(shù)應(yīng)用。

關(guān)鍵詞：CSS；兼容性；CSS Hach

中圖分類號(hào)：TP393.092

目前主流的瀏覽器有IE、Firefox和Chrome三大瀏覽器，三種瀏覽器對(duì)CSS樣式標(biāo)解析不同，而且同種瀏覽器的版本不同對(duì)CSS樣式表解析也不同，如IE瀏覽器，IE6與IE7、8、9對(duì)CSS樣式表在布局上解析就有很大區(qū)別，常出現(xiàn)在IE7、8、9下顯示正常頁(yè)面到IE6下顯示亂碼。網(wǎng)頁(yè)開發(fā)者掌握CSS瀏覽器兼容性必須掌握。

1 CSS層疊樣式表

CSS[1]層疊樣式表是W3C制定一系列標(biāo)準(zhǔn)之一。CSS樣式表對(duì)網(wǎng)頁(yè)元算樣式的設(shè)置，如字體、布局設(shè)計(jì)、元素定位、背景設(shè)置、顏色、圖片效果、鼠標(biāo)變幻和表格樣式設(shè)置。CSS可以直接使用HTML內(nèi)部標(biāo)簽或自己命名來(lái)定義CSS樣式，CSS樣式的使用使得網(wǎng)頁(yè)的內(nèi)容和網(wǎng)頁(yè)表現(xiàn)形式分開，有利于快速統(tǒng)一對(duì)網(wǎng)頁(yè)樣式的控制。目前常用的CSS版本有2.1版和3.0版。

2 導(dǎo)致網(wǎng)頁(yè)在不同瀏覽器下顯示效果不同的原因

網(wǎng)頁(yè)在不同瀏覽器下顯示效果不同主要是因?yàn)g覽器開發(fā)商開發(fā)產(chǎn)品時(shí)沒有采用統(tǒng)一標(biāo)準(zhǔn)，它們按自己的標(biāo)準(zhǔn)，它們對(duì)HTML和CSS解析不同，主要分為以下幾類。（1）不同瀏覽器對(duì)HTML內(nèi)部標(biāo)簽屬性值解析不同。如body標(biāo)簽內(nèi)邊距默認(rèn)值不同，IE默認(rèn)為Padding=10px；firefox下內(nèi)邊據(jù)為20px。項(xiàng)目列表UL、OL的默認(rèn)值不同，在IE瀏覽器中默認(rèn)內(nèi)邊據(jù)約40px，而firefox的默認(rèn)值為0。（2）不同瀏覽器對(duì)CCS解析不同，如嵌套盒子之間的距離，若父Div的高度，小于子div的“高度+margin-top”值，此時(shí)IE瀏覽器會(huì)自動(dòng)擴(kuò)大，保持子元素的margin-bottom的空間以及元素自身的padding-bottom；而firefox就不會(huì)，它會(huì)保證父元素的height高度的完全吻合，而這時(shí)子元素將超過(guò)父元素。（3）CSS版本不同，造成兼容性問(wèn)題。

3 瀏覽器兼容性常見問(wèn)題

（1）瀏覽器對(duì)項(xiàng)目列表UL、OL的默認(rèn)值不同，解決這個(gè)問(wèn)題可通過(guò)CSS給UL、OL確定內(nèi)邊距：UL，OL{list-style：none；margin：0；padding：0；}。（2）單行文字在div中垂直居中問(wèn)題。Div沒有垂直居中屬性，解決方法設(shè)置div的行高等于div的高：{line-height：50px（div高值）；}。（3）Margin自動(dòng)加倍。Div若被設(shè)float，則在瀏覽器IE6下會(huì)左外邊距加倍，解決方法是在這個(gè)div里加css樣式：{ display：inline；}。（4）IE瀏覽器下DIV浮動(dòng)文本產(chǎn)生3象素，解決方法左邊對(duì)象浮動(dòng)，右邊采用外補(bǔ)丁的左邊距來(lái)定位，右邊對(duì)象內(nèi)的文本會(huì)離左邊有3px的間距margin-right：-3px；代碼如下，其顯示效果如圖1：