問題描述

各位高手總結(jié)下。

問題解答

回答1：

瀏覽器渲染兼容性問題匯總：http://www.w3help.org/zh-cn/causes/

大部分兼容性問題是因為歷史原因，比如：IE6不支持border-radius和IE7/8不支持css3屬性。

然后是因為w3c的標準不夠清晰或其他原因?qū)е赂鳛g覽器廠商對標準的理解不同，例如：

各瀏覽器對常用行內(nèi)替換元素的 ’baseline’ 位置理解不同各瀏覽器對設(shè)定了 ’min-height’、’max-height’ 特性的元素生成的包含塊的高度計算存在差異各瀏覽器對使用 shrink-to-fit 寬度的包含塊中行內(nèi)元素后的絕對定位元素的靜態(tài)位置判斷存在差異各瀏覽器對于未明確設(shè)定高度的包含塊內(nèi)包含百分比單位高度的塊級元素或行內(nèi)塊元素的高度計算存在差異各瀏覽器中 ’min-width’ 或 ’max-width’ 值單位為百分比的 IMG 元素的包含塊的 ’shrink-to-fit’ 算法存在差異各瀏覽器對未明確設(shè)定寬度的塊級元素通過 margin 導致溢出其寬度為 0 的包含塊時的寬度計算值存在差異

最坑的是瀏覽器不按標準來，自己搞一套渲染邏輯。如：

各瀏覽器對 ’display’ 特性值的支持程度不同IE6 IE7(Q) IE8(Q) 中 A 元素的 :visited :hover :active 偽類未按規(guī)范要求的算法來計算針對性IE6 IE7 IE8(Q) 中對浮動元素上 ’clear’ 特性的解釋出現(xiàn)錯誤，使其自身位置和其后浮動元素的位置與其他瀏覽器中不同Chrome Safari 認為 ’float:center’ 是合法值且其計算值為 ’none’

感謝@Humphry的補充：

這個站點已經(jīng)不更新了，這里還有一份更加豐富的兼容性列表： http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29caniuse

我也補充一下： 1. 現(xiàn)在前端開發(fā)很少再兼容IE6/7了。 2. 最新版的瀏覽器的css兼容性問題越來越小，各瀏覽器趨于一致。 3. 響應式設(shè)計的大量應用，導致兼容各種尺寸的屏幕和各種設(shè)備成了前端開發(fā)更重要的問題。