先说一个判断：Firefox和IE的兼容性，处理好了是基本功，处理不好就是坑。这两款浏览器虽然现在各有各的用户群，但它们的渲染逻辑和API支持差异不小。如果想让项目在不同浏览器下都跑得顺畅，下面这几个方法值得记下来。

用CSS Hack来兜底

所谓CSS Hack，就是用特定浏览器才认得的CSS规则来“区别对待”。

• IE6及以下：认 _ 下划线开头的属性，比如 _margin: 0;。
• IE7及以上：认 * 星号属性，比如 *zoom: 1;。这个属性触发IE的haslayout机制，可以解决很多布局坍缩问题。
• Firefox：对这些属性一概不理，不会干扰正常渲染。

你可能会觉得这种写法不太规范。但放在几年前，它确实是很多前端工程师的救命稻草。现在主流做法更推荐使用条件注释或特性检测。不过，在某些遗留项目里，CSS Hack仍有其存在的理由。

JavaScript条件判断

除了样式层面的兼容，脚本逻辑的区分也同样重要。

一个简单的方法：通过检测 document.all 是否存在来判断当前浏览器是否为IE。

if (document.all) {
    // 针对IE执行的代码
} else {
    // 针对Firefox及其他浏览器的代码
}

这只是一个基础写法。更严谨的做法是结合特性检测，或使用现成的库（如Modernizr）。但基础思路不变——用条件分支把不同浏览器的执行路径隔开，避免因某个API不兼容导致整个功能崩溃。

图片处理

在图片显示方面，也容易踩坑。比如在Firefox里看着正常，一换到IE里图片就被拉伸或变形。

原因：通常是没有给图片定义具体的 width 和 height 属性。两个浏览器对图片尺寸的默认解析策略不完全一致。尤其是当容器本身没有明确尺寸时，表现差距会放大。

防范方法：尽量在实际图片元素上同时设置宽高值。这样既不影响Firefox的正常显示，也规避了IE的渲染偏差。

另外，如果涉及PNG透明通道的兼容问题，早期IE对PNG-24的支持并不好，需要引入AlphaImageLoader滤镜。不过现在这已经不是大问题了。

测试与优化

最后一步，也是最关键的一步：测试。别偷懒，IE和Firefox都得跑一遍流程，尤其是那些交互频繁、样式复杂的模块。

发现问题后，根据上面提到的方法逐一排查和调整。兼容性不是一劳永逸的事，它需要你在开发过程中多长个心眼，把不同浏览器的差异考虑进设计阶段。

说到底，这几个方法并不复杂，胜在实用。只要按部就班处理好CSS、JavaScript和图片这三个层面，想做出在Firefox和IE下都能稳定运行的良好体验，并不是什么难事。

《夸克》非常好用的免费AI浏览器

下载APP查看