瀏覽器兼容性問題又被稱為網頁或網站兼容性問題；不同瀏覽器內核及所支持的html等網頁語言標准不同，不同客戶端環境（如分辨率不同）造成實際顯示效果未能達到預期理想效果
首先我們來看一下目前市面上常見的一些瀏覽器：ie、chrome、firefox、safari、opera、maxthon、360、qq、yy、uc、sogou、2345、淘寶、獵豹、世界之窗等
其中表現很出色的有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> </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%;}
一個網站尤其是大型門戶網站的兼容性調試是一項很浩大的工程，耗時耗力耗青春，並且還不一定討好，從事過大項目開發中兼容性調試的同行一定有着和他人不一樣的體會，個中滋味實在難以明言
很多人以為自己懂兼容性，覺得不過如此，隨手可以做出一個全瀏覽器兼容的網頁
但是一個在兼容性問題上沉浸多年並在大型門戶級網站開發中支持很久的人在兼容性水平的表現上是完全不一樣的，兼容性出色的工程師可以通過部署好自己的代碼，從很多源頭上避免產生兼容性問題的可能性