常见浏览器兼容性问题与解决方案

浏览器兼容性问题，指不同浏览器对同一段代码解析不一致，页面显示效果不统一。多数产品要求：用户用什么浏览器看，都该是同一套效果。所以兼容是前端必须面对的事。

前端大致能分成两类。第一类按设计图精确到 1px，很少踩兼容坑，踩到的多半是浏览器 bug，页面后期好维护。第二类间距、行高、图片位置常差几像素，效果靠反复调试「碰巧」出来，布局很脆，改 A 浏览器又坏 B。他们遇到的多数问题，其实该算技术本身，而不是浏览器。

下文按第一类严谨开发者的视角，从解析差异列常见坑。相关：主流浏览器 CSS 3 和 HTML 5 兼容清单。更长清单见47 种常见的浏览器兼容性问题。

一、CSS 九个高频坑

小高度标签超高，是因为 IE8 之前会给标签一个最小默认行高，空标签也会撑到那一行高。min-height 场景常见于：内容不足 300px 时容器仍要 300px，超出则撑开而不是出滚动条。

盒子模型：标准 W3C 的 content 不含 border/padding；IE6 的 content 含 border 和 padding（相当于 box-sizing: border-box）。IE7 和非 IE 按 content-box。

二、CSS Hack 怎么分层

做兼容页的方法是：每写一小段（一行或一块）就在不同浏览器里看一眼。很多问题来自默认属性不同，稍加设置就能解。作者本人很少用 hack，但 hack 确实好用。可把浏览器分成三类：IE6；IE7 和遨游；其它（IE8、Chrome、FF、Safari、Opera）。

• IE6 认识的 hack：下划线 _ 和星号 *
• IE7、遨游认识：星号 *

例如 height:300px;*height:200px;_height:100px;。IE6 会依次覆盖成 300 → 200 → 100；IE7 / 遨游停在 200（不认 _height）；其余只认第一个 300。优先级相同且冲突时后一条覆盖前一条，书写次序很重要。

三、JS 里的兼容

const

Firefox 可用 const 或 var 定义常量；IE 只能用 var。统一用 var（在当时的 IE 环境里）。

event.srcElement / target

IE 的 event 有 srcElement 没有 target；Firefox 相反。写法：srcObj = event.srcElement ? event.srcElement : event.target;

事件绑定

IE：dom.attachEvent()；其它：dom.addEventListener()。标准原先偏捕获（外→内），IE 偏冒泡（内→外）；后来标准把冒泡收进去，这就是 addEventListener 第三个参数的由来，冒泡是默认。

Ajax

IE：ActiveXObject；其它：XMLHttpRequest。

一句话总结：兼容问题多半是默认盒模型、浮动双倍 margin、行高和事件模型不一致；先重置、再按引擎补一刀，Hack 按 IE6 / IE7 / 其它三层写且注意覆盖次序。