首先向大家解釋一下什么是瀏覽器的兼容性？所謂瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯
首先向大家解釋一下什么是瀏覽器的兼容性？所謂瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是網(wǎng)站建設(shè)人員經(jīng)常會(huì)碰到且必須要解決的問題，下面給大家總結(jié)一下我們經(jīng)常會(huì)遇到的兼容性問題有哪些：
1.超鏈接訪問過后hover樣式就不出現(xiàn)的問題?
被點(diǎn)擊訪問過的超鏈接樣式不在具有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)后本來外邊距10px,但I(xiàn)E解釋為20px,解決辦法是加上display:inline
3.為什么FF下文本無法撐開容器的高度?
標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義：
div { height:auto! important; height:200px; min-height:200px; }
4.為什么web標(biāo)準(zhǔn)中IE無法設(shè)置滾動(dòng)條顏色了?
原來樣式設(shè)置：
<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.為什么無法定義1px左右高度的容器?
IE6下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
6.怎么樣才能讓層顯示在FLASH之上呢?
解決的辦法是給FLASH設(shè)置透明:
<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；
這里使用百分比絕對(duì)定位，與外補(bǔ)丁負(fù)值的方法，負(fù)值的大小為其自身寬度高度除以二
8、firefox嵌套div標(biāo)簽的居中問題的解決方法
假定有如下情況：
<div id="a">
<div id="b"> </div>
</div>
如果要實(shí)現(xiàn)b在a中居中放置，一般只需用CSS設(shè)置a的text-align屬性為center。這樣的方法在IE里看起來一切 正常；但是在Firefox中b卻會(huì)是居左的。
解決辦法就是設(shè)置b的橫向margin為auto。例如設(shè)置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透明度問題。
_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下就更不一樣了。
給文字設(shè)定 line-height 。確保所有文字都有默認(rèn)的 line-height 值。這點(diǎn)很重要，在高度上我們不能容忍1px 的差異。
12、如何達(dá)到容器高度自適應(yīng)。
<div style="width:200px; height:auto !important; height:200px; min-height:200px; ">
內(nèi)容
</div>
13、如何解決圖片下方留白的問題。
在寫圖片時(shí)建議不要把div后標(biāo)簽換行；如：<div><img src=...></div>,此標(biāo)簽不要換行；
好了，暫時(shí)實(shí)戰(zhàn)是解決問題的最佳途徑，也是遇到問題的唯一途徑，大家在做網(wǎng)站建設(shè)的時(shí)候，要親自制作才能更快更好的成長(zhǎng)，另外多去借鑒別人的經(jīng)驗(yàn)也是進(jìn)步的捷徑！
