首先向大家解釋一下什么是瀏覽器的兼容性？所謂瀏覽器兼容性問(wèn)題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁(yè)面顯示效果不統一的情況。在大多數情況下，我們的需求是，無(wú)論用戶(hù)用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統，都應該是統一的顯
首先向大家解釋一下什么是瀏覽器的兼容性？所謂瀏覽器兼容性問(wèn)題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁(yè)面顯示效果不統一的情況。在大多數情況下，我們的需求是，無(wú)論用戶(hù)用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問(wèn)題是網(wǎng)站建設人員經(jīng)常會(huì )碰到且必須要解決的問(wèn)題，下面給大家總結一下我們經(jīng)常會(huì )遇到的兼容性問(wèn)題有哪些：
1.超鏈接訪(fǎng)問(wèn)過(guò)后hover樣式就不出現的問(wèn)題?
被點(diǎn)擊訪(fǎng)問(wèn)過(guò)的超鏈接樣式不在具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A
2.IE6的雙倍邊距BUG
例如:
<style type="text/css">
body {margin:0}
div { float:left; margin-left:10px; width:200px; height:200px; border :1px solid red }
</style>
浮動(dòng)后本來(lái)外邊距10px,但IE解釋為20px,解決辦法是加上display:inline
3.為什么FF下文本無(wú)法撐開(kāi)容器的高度?
標準瀏覽器中固定高度值的容器是不會(huì )象IE6里那樣被撐開(kāi)的,那我又想固定高度，又想能被撐開(kāi)需要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義：
div { height:auto! important; height:200px; min-height:200px; }
4.為什么web標準中IE無(wú)法設置滾動(dòng)條顏色了?
原來(lái)樣式設置：
<style type="text/css">
body { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; }
</style>
解決辦法是將body換成html
5.為什么無(wú)法定義1px左右高度的容器?
IE6下這個(gè)問(wèn)題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
6.怎么樣才能讓層顯示在FLASH之上呢?
解決的辦法是給FLASH設置透明:
<param name="wmode" value="transparent" />
7.怎樣使一個(gè)層(塊)垂直居中于瀏覽器中?
<style type="text/css">
<!--
div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red;}
-->
</style>
用js獲取盒子的寬度，然后讓網(wǎng)頁(yè)的總寬度-盒子寬度/2;就得到了left或top；
這里使用百分比絕對定位，與外補丁負值的方法，負值的大小為其自身寬度高度除以二
8、firefox嵌套div標簽的居中問(wèn)題的解決方法
假定有如下情況：
<div id="a">
<div id="b"> </div>
</div>
如果要實(shí)現b在a中居中放置，一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE里看起來(lái)一切 正常；但是在Firefox中b卻會(huì )是居左的。
解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為：margin: 0 auto;。
9、css如何讓圖片垂直居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div { width:500px; height:500px; border:1px solid #ccc; overflow:hidden; position:relative; display:table-cell; text-align:center; vertical-align:middle }
div p { position:static; +position:absolute; top:50% }
img { position:static; +position:relative; top:-50%;left:-50%; width:276px; height:110px }
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
10、如何處理png透明度問(wèn)題。
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/logo.png'); /* IE6 */
_ background-image: none; /* IE6 */
11、如何處理文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實(shí)際占高16px，下留白3px，ff 下實(shí)際占高17px，上留白1px，下留白3px，opera下就更不一樣了。
給文字設定 line-height 。確保所有文字都有默認的 line-height 值。這點(diǎn)很重要，在高度上我們不能容忍1px 的差異。
12、如何達到容器高度自適應。
<div style="width:200px; height:auto !important; height:200px; min-height:200px; ">
內容
</div>
13、如何解決圖片下方留白的問(wèn)題。
在寫(xiě)圖片時(shí)建議不要把div后標簽換行；如：<div><img src=...></div>,此標簽不要換行；
好了，暫時(shí)實(shí)戰是解決問(wèn)題的最佳途徑，也是遇到問(wèn)題的唯一途徑，大家在做網(wǎng)站建設的時(shí)候，要親自制作才能更快更好的成長(cháng)，另外多去借鑒別人的經(jīng)驗也是進(jìn)步的捷徑！
