解决浏览器兼容性问题

如何解决浏览器兼容问题总结

作者：程序员小锋子
发表日期：2016-5-29

* 主流浏览器有5种，分别是：IE、chrome、firefox、safari、opera. *

一. CSS Hack

为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。 CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。 针对不同浏览器，可以将CSS Hack 网站设计代码整理如下：

1. 针对I E 系列浏览器的网站设计代码 针对 IE 6 的专属 CSS Hack 网站设计代码 #id{ _display: block; } 也就是在网站设计CSS属性前加一个小划线就好。 针对 IE 7 的专属 CSS Hack 网站设计代码 #id{ display: block; } 即在网站设计CSS属性前加上一个星号即可 针对 IE 8 的专属 CSS Hack 网站设计代码 #id{ margin-top: 10px 9; /IE8*/ } 如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可 。
2. 针对火狐的CSS Hack 网站设计代码 火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } 。
3. 针对 Safari 的CSS Hack 网站设计代码 Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，使用了KDE的KHTML作为浏览器的运算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近。
4. 针对 Opera 的CSS Hack 网站设计代码 Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准.

二. HTML

1. 最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上 解决办法是：htmlshim框架可以让低于IE9的浏览器支持html5

2. img的alt属性，在图片不存在的情况下，各浏览器的解析不一致 在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字
3. ul标签内外边距问题 ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

三. JavaScript

1. 标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；

2. 事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
3. 我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
4. 在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。 比如：var year= new Date().getYear();
5. ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
6. IE中不能操作tr的innerHtml
7. 获得DOM节点的父节点、子节点的方式不同 其他浏览器：parentNode parentNode.childNodes IE：parentElement parentElement.children
   注释： 包括自己日常练习碰到的，包括自己在网上看到别人整理的，所以有很多不足。参看作者有：作者：15910715277
   如有补充，请在下面补充，大家一起学习，谢谢大家。