关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦

关于IE、Firefox、Opera页面呈现异同写脚本很痛苦，主要原因是不同浏览器的页面呈现方式存在差异，导致相同的HTML、CSS代码在不同浏览器下呈现效果不同，导致需要编写兼容性代码。以下是详细攻略：

1. 熟悉各浏览器的特点

了解每个浏览器的特性，可以使我们更好地编写兼容性代码。

Internet Explorer

Internet Explorer（IE）是微软的浏览器，最新版本是IE11。IE在早期市场占有率极高，但近年来逐步被Chrome、Firefox等浏览器取代。IE存在很多问题，容易出现JavaScript错误、CSS样式不兼容、性能不佳等问题。

Firefox

Firefox是Mozilla基金会开发的浏览器，是主流浏览器之一。Firefox的渲染引擎是Gecko。Firefox遵守Web标准，对HTML5、CSS3提供了很好的支持。

Opera

Opera是挪威的一家软件公司开发的浏览器，是一款小众浏览器。Opera的渲染引擎是Presto，现在基于Blink，与Google Chrome渲染引擎相同。Opera遵守Web标准，对HTML5、CSS3提供了很好的支持。

2. 编写兼容性代码

编写兼容性代码可以保证网站在不同浏览器下都获得相同的呈现效果。下面是一些常用的兼容性代码示例：

CSS兼容性

在CSS中，常见的兼容性问题是不同浏览器对CSS3属性的支持不同。例如，IE浏览器不支持border-radius属性，需要使用IE专用前缀"-ms-"

/* 标准写法 */
div{
    border-radius: 5px;
}
/* IE写法 */
div{
    -ms-border-radius: 5px;
    border-radius: 5px;
}

JavaScript兼容性

在JavaScript中，常见的兼容性问题是不同浏览器对ECMAScript语言规范的支持程度不同。例如，IE8及以下版本浏览器不支持forEach方法，需要使用for循环替代。

/* 标准写法 */
var arr = ['a', 'b', 'c'];
arr.forEach(function(val, index){
    console.log(index + ' : ' + val);
});
/* IE写法 */
var arr = ['a', 'b', 'c'];
for(var i=0; i<arr.length; i++){
    console.log(i + ' : ' + arr[i]);
}

总结

了解不同浏览器的特点，编写兼容性代码是保证网站在不同浏览器下呈现效果正常的重要手段。同时，应该注意将浏览器更新到最新版本，避免使用过时的浏览器。