前端开发中遇到的浏览器兼容性问题出现这个问题的主要原因是不同的浏览器内核不同，解析网页的结果不同。解决浏览器兼容性问题，主要从三个方面着手：html、css、js.htmlPart1.调用CDN的html5shiv。html5shiv.js可以让IE低版本浏览器识别并支持html5标签。2.如果图片中不存在img标签，各个浏览器的解析不一致。chrome下显示破损图片，firefox下显示alt文字，IE下显示破损图片加文字。3.ul标签的内外边距。ul标签在IE6\IE7中有默认外边距，但在IE8及以上及其他浏览器中有默认内边距。解决办法：统一设置ul的内外边距为0。csspart1.csshack问题。主要针对不同版本的IE，不同的版本有不同的写法：2.IE6双面间距问题。IE6浮动后有水平边距。此时，元素的外边距是其值的两倍。解决方案：显示：内联。3.IE6下图片底部有空隙，解决办法：给img设置display:block。4.在IE6下，两个浮动之间会有3px的bug。解决方法：为右边的元素设置float:left。5、IE6下没有min-width的概念，其默认宽度为min-width。6、在IE6下使用margin:0auto，元素无法居中。解决方法：为其父容器设置text-align:center。7.被点击的超链接不再具有悬停和活动属性。解决方法是按照"lvha"的顺序编写css样式：":link"：a标签还没有被访问过的状态；":visited":a标签被访问的状态；":hover":鼠标悬停在标签上的状态；":active":标签被鼠标按下时的状态。8.使用绝对定位或相对定位后，IE中z-index的设置无效，因为元素依赖于父元素的z-index，但父元素的默认值为0，而元素的高度child和parent的高度都很低，所以显示顺序不会改变。9、IE6下无法设置1px的行高，原因是其默认行高造成的，解决办法：setoverflow:hidden;或者line-height:1px。10.不同浏览器中labels默认的outerpatch和innerpatch是不同的。解决方案：*{margin:0;padding:0;}jspart1.标准的事件绑定方法函数在css中是addEventListener，在IE下是attachEvent。2.事件捕获方式不一致，标准浏览器是从外到内，IE是从内到外，但最终的结果还是以IE的标准为准。3.我们常说的事件处理时的事件属性，在标准浏览器中是传入的，在IE中是通过window.event获取的。而且获取target元素的方法也不一样，标准浏览器是event.target，IE是event.srcElement。4.在低版本IE中获取的日期处理函数的值与1900没有差异，但在高版本IE中与标准浏览器一致，获取的值为与1900的差异。对于例子：varyear=newDate().getYear()，在IE中获取当前年份，在firefox中获取当前年份与1900的差值。5.Ajax以不同的方式实现。我理解的是获取XMLHttpRequest的区别。IE下是activeXObject。6、tr的innerHtml不能在IE中操作。7.获取DOM节点的父节点和子节点的方法不同。其他浏览器：parentNode、parentNode.childNodes，IE：parentElement、parentElement.children。
