問(wèn)題描述

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

問(wèn)題解答

回答1：

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

大部分兼容性問(wèn)題是因?yàn)闅v史原因，比如：IE6不支持border-radius和IE7/8不支持css3屬性。

然后是因?yàn)閣3c的標(biāo)準(zhǔn)不夠清晰或其他原因?qū)е赂鳛g覽器廠商對(duì)標(biāo)準(zhǔn)的理解不同，例如：

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

最坑的是瀏覽器不按標(biāo)準(zhǔn)來(lái)，自己搞一套渲染邏輯。如：

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

感謝@Humphry的補(bǔ)充：

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

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