首先, 我们要知道, 为什么各浏览器会产生兼容性问题?
产生这个问题的主要原因是市面上的浏览器的种类很多, 但由于不同的浏览器的内核不一致, 从而导致各个浏览器对网页的解析就产生了差异.
解决浏览器兼容性问题, 还是从三个方面入手: html 部分, CSS 部分, js 部分.
1,html 部分
a, 最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素, 从而导致不能解析. 这点主要体现在 html5 的新标签上
解决办法是: htmlshim 框架可以让低于 IE9 的浏览器支持 html5
b,img 的 alt 属性, 在图片不存在的情况下, 各浏览器的解析不一致
在 chrome 下显示的是一张破损的图片, 在 ff 下显示的是 alt 的文字, 而在 IE 中显示的是破损的图片加文字
c,ul 标签内外边距问题
ul 标签在 IE6\IE7 中, 有个默认的外边距, 但是在 IE8 以上及其他浏览器中有个默认的内边距
2,css 部分:
a,css 的 hack 问题: 主要针对 IE 的不同版本, 不同的浏览器的写法不同
IE 的条件注释 hack:
- <!--[if IE 6]> 此处内容只有 IE6.0 可见 <![endif]-->
- <!--[if IE 7]> 此处内容只有 IE7.0 可见 <![endif]-->
b,IE6 双边距问题: IE6 在浮动后, 又有横向的 margin, 此时, 该元素的外边距是其值的 2 倍
解决办法: display:block;
c,IE6 下图片的下方有空隙
解决方法: 给 img 设置 display:block;
d,IE6 下两个 float 之间会有个 3px 的 bug
解决办法: 给右边的元素也设置 float:left;
e,IE6 下没有 min-width 的概念, 其默认的 width 就是 min-width
f,IE6 下在使用 margin:0 auto; 无法使其居中
解决办法: 为其父容器设置 text-align:center;
g, 被点击过后的超链接不再具有 hover 和 active 属性
解决办法: 按 lvha 的顺序书写 css 样式
h, 在使用绝对定位或者相对定位后, IE 中设置 z-index 失效, 原因是因为其元素依赖于父元素的 z-index, 但是父元素默认为 0, 子高父低, 所以不会改变显示的顺序
i,IE6 下无法设置 1px 的行高, 原因是由其默认行高引起的
解决办法: 为期设置 overflow:hidden; 或者 line-height:1px;
3,js 部分
a, 标准的事件绑定方法函数为 addEventListener, 但 IE 下是 attachEvent;
b, 事件的捕获方式不一致, 标准浏览器是由外至内, 而 IE 是由内到外, 但是最后的结果是将 IE 的标准定为标准
c, 我们常说的事件处理时的 event 属性, 在标准浏览器其是传入的, IE 下由 window.event 获取的. 并且获取目标元素的方法也不同, 标准浏览器是 event.target, 而 IE 下是 event.srcElement
d, 在低版本的 IE 中获取的日期处理函数的值不是与 1900 的差值, 但是在高版本的 IE 中和标准浏览器保持了一致, 获取的值也是与 1900 的差值.
比如: var year= new Date().getYear();
e,ajax 的实现方式不同, 这个我所理解的是获取 XMLHttpRequest 的不同, IE 下是 activeXObject
f,IE 中不能操作 tr 的 innerHtml
g, 获得 DOM 节点的父节点, 子节点的方式不同
其他浏览器: parentNode parentNode.childNodes
IE:parentElement parentElement.children
来源: http://www.bubuko.com/infodetail-2654976.html