最全整理浏览器兼容性问题与解决方案VIP专享

常见浏览器兼容性问题与解决方案 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 在学习浏览器兼容性之前，我想把前端开发人员划分为两类： 第一类是精确按照设计图开发的前端开发人员，可以说是精确到 1px 的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bu g，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。 第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px 。某种效果的实现也是反复调试得 到，具 体 为什么出 现这种效果还 模 模 糊 糊 ，整 体 布 局 十 分脆 弱 。稍 有改 动 就乱 七 八 糟 。代码为什么这么写 还 不知 所以然 。这类开发人员往往经常为兼容性问题所困 。修 改好 了 这个 浏览器又 乱 了 另 一个 浏览器。改 来改 去 也毫 无头 绪 。其 实他们碰到的兼容性问题大部 分不应该归 咎 于 浏览器，而是他们的技 术 本身 了 。 文 章 主 要针 对的是第一类，严 谨 型 的开发人员，因此 这里 主 要从 浏览器解析差异 的角 度 来分析兼容性问题。 浏览器兼容问题一：不同浏览器的标 签 默 认 的外 补 丁 和内 补 丁 不同 问题症 状 ：随 便 写 几个 标 签 ，不加 样 式 控 制的情况下，各 自 的margin 和 padding差异 较大。 碰到频 率 :100% 解决方案：CSS 里 * 备 注 ：这个 是最 常见的也是最 易解决的一个 浏览器兼容性问题，几乎 所有的CSS文 件 开头 都会用通 配 符 *来设置各 个 标 签 的内 外 补 丁 是0。 浏览器兼容问题二：块 属 性标 签 float后，又 有横 行的margin 情况下，在 IE6显示margin 比设置的大 问题症 状 :常见症 状 是IE6 中 后面的一块 被 顶 到下一行 碰到频 率 ：90%（ 稍 微 复杂 点 的页面都会碰到，float 布 局 最 常见的浏览器兼容问题） 解决方案：在 float 的标 签 样 式 控 制中 加 入 display :i...