轉載自：http://blog.csdn.net/dandanzmc/article/details/18772429
什麼是瀏覽器兼容問題？
所謂的瀏覽器兼容性問題，是指因爲不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什麼瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。
爲什麼會出現瀏覽器兼容問題？
瀏覽器兼容問題的出現，是因爲各個瀏覽器對W3C標準支持的程度不同而導致的。如果網頁都是一個標準的話，也不會又這種問題，但微軟把自己當成了標準，不遵循網頁的規範，所以一些網頁即使語法錯誤也會在IE正常顯示，而在FF，谷歌瀏覽器等不同內核的瀏覽器中出現“兼容問題”，其實是網頁不遵循Web標準。
當前主瀏覽器的核心是什麼？
1) Trident：IE瀏覽器使用的內核,該內核程序在1997年的IE4中首次被採用，是微軟在Mosaic代碼的基礎之上修改而來的，並沿用到目前的IE7。Trident實際上是一款開放的內核，其接口內核設計的相當成熟，因此纔有許多采用IE內核而非IE的瀏覽器涌現（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。
2) Geckos： Netcape6開始採用的內核，後來的FF也採用了該內核，Geckos的特點是代碼完全公開，因此，其可開發程度很高，全世界的程序員都可以爲其編寫代碼，增加功能。
3) Presto：目前Opera採用的內核，該內核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。
4) Webkit：Safari瀏覽器使用的內核。Google的Chrome瀏覽器也是採用Webkit。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統的開發。所以Webkit也是自由軟件，同時開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器還是比較安全的瀏覽器。
我整理的一些實例，都是在谷歌、IE7、IE8、IE9、IE10、FF中測試過。
實例：
1.問題：隱藏瀏覽器的滾動條
解決：
1) 只有ie7支持<body scroll="no">
2) 除ie7不支持body{overflow:hidden}
3) 所有瀏覽器html{overflow:hidden}
2.問題：不讓在輸入框中輸入漢字
解決：
用ime-mode:disabled，只在ie和ff中有效，谷歌中，尚未找到方法
3.問題：不能將內容複製到輸入框中
解決：
onpaste="returnfalse"，瀏覽器通用
4.問題： 點擊超鏈接後，hover、active樣式沒有效果
解決：改變CSS屬性的排列順序:L-V-H-A
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 當有鼠標懸停在鏈接上 */
a:active {color: #0000FF} /* 被選擇的鏈接 */
5.問題：li中內容超過長度時，想以省略號顯示，此方法適用於ie7、8、9、10，谷歌，ff瀏覽器
解決：
li{list-style-type:none;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
overflow: hidden; }
6.問題：當div框固定高度寬度後，輸入的文字超過div寬度，超出這個長度，不換行
解決：
word-wrap:break-word
7.列表不能換行的問題
問題： li設置爲浮動，後面的li緊隨其後，不能換行
解決： 在下一個li上清除浮動：clear:both
8.如何對齊文本和文本輸入框
問題：當input元素在設置了高時，在IE7、IE8、IE9下會出現文本和文本輸入框不能對齊的現象
解決： vertical-align:middle;
9.容器寬度在瀏覽器中解釋不同
問題：不同瀏覽器下寬度不同
比如說設置width：200px，在iE7、IE8、IE9下顯示的是200px，在FF、Chrome、Opera中顯示的是220px
解決：
用width:200px; *width:220px，其中iE7、IE8、IE9會識別兩個寬度，以後者爲準，故寬度爲220px，
在FF、Chrome、Opera中，識別第一個寬度，解析後顯示寬度爲220px
10.Div居中問題
問題：IE7、IE8、IE9在設置了margin-left和margin-right爲auto後，並不能使div居中顯示，其他行
解決：設定body居中，定義text-algin: center
例如：
<body style="text-align:center;">
<div style="margin-left:auto;margin-right:auto; width:300px; height:200px;" >
div居中問題解決 </div>
</body>
11.min-height問題
問題：IE7、IE8、IE9對min-height不識別，其他無問題
解決：
#box{width: 100px; height: 35px;}
html>body#box{ width:auto; height:auto; width:100px; min-height:35px;}
12.嵌套div標籤的居中問題
問題：
假定有一下情況：即div嵌套div
<div id="a">
<div id="b"> </div>
</div>
此時要設置內層div在外層div的居中位置，在外層設置了text-algin爲center後，IE7、IE8、IE9顯示正常，但是在IE10和chrome和opera和FF仍然顯示在居左位置。
解決： 除在外層設置text-algin爲center，在內層div中設置margin：0 auto樣式
13.td高度的問題
問題：
在IE9、IE10、FF、chrome中table中td的高度不包含border的寬度，但是IE7和IE8中td的高度包含了border的高度，設置line-height和height一樣。
解決：暫無解決方法
14.li指定高度後，出現排版錯誤
問題：
在IE7下如果爲li指定高度可能會出現排版錯位，其他瀏覽器無此現象
解決：設置line-height
15.禁止選取網頁內容
問題：在需要禁止選取網頁的內容，FF用-moz-user-select:none，其他瀏覽器用onselectstart='return false'
解決：
FF：-moz-user-select:none
其他：onselectstart='return false'
16.如何對其文本和文本輸入框的內容
問題：
當input元素在設置了高和設置了text-align:center時，在IE7、IE8、IE9下會出現文本和文本輸入框內容不能對齊的現象，其他正常，包括opera
解決：
在樣式中設置line-height:100px
17.ie8兼容css3的rgba寫法
<style>
.box{
background:rgba(0,0,0,.5);
width:100%;
height:200px;}
</style>
兼容寫法：
<!--[if lte IE 8]>
<style>
.box{
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
zoom: 1;
height:200px;
width: 100%;}
</style>
<![endif]-->
“#7f000000”由兩部分組成：
第一部是透明度值：#7f 。是rgba透明度0.1的IEfilter值。從0.1到0.9每個數字對應一個IEfilter值。
第二部分是：就是RGB對應的16進制值。
兩部分組合好了就成了用在filter裏的顏色值了。
這樣就可以兼容IE8的rgba了。
RGBA透明值與IEfilter值轉換工具：http://www.rockyxia.com/tools/rgba.php