首先，为什么各种浏览器会产生兼容性问题？
产生这个问题的主要原因是市面上的浏览器的种类很多，但由于不同的浏览器的内核不一致，从而导致各个浏览器对网页的解析就产生了差异。
对于解决浏览器兼容性问题，我们要从三个方面入手：html部分、css部分、js部分。
1、html部分
1、最突出也是最容易想到的就是高版本的浏览器用了低版本的浏览器无法识别的元素，从而导致不能解析。这点主要体现在html5的新标签上
解决办法是：htmlshim框架可以让低于IE9的浏览器支持html5
2、img的alt属性，在图片不存在的情况下，各浏览器的解析不一致
在chrome下显示的是一张破损的图片，在ff下显示的是alt的文字，而在IE中显示的是破损的图片加文字
3、ul标签内外边距问题
ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距
2、css部分
1、css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
IE的条件注释hack：
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
2、IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍
解决办法：display:block;
3、IE6下图片的下方有空隙
解决方法：给img设置display:block;
4、IE6下两个float之间会有个3px的bug
解决办法：给右边的元素也设置float:left;
5、IE6下没有min-width的概念，其默认的width就是min-width
6、IE6下在使用margin:0 auto;无法使其居中
解决办法：为其父容器设置text-align:center;
7、 被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样式
8、在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
9、IE6下无法设置1px的行高，原因是由其默认行高引起的
解决办法：为期设置overflow:hidden;或者line-height:1px;
3、js部分
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节点的父节点、子节点的方式不同
对于常见的游览器兼容性问题的解决
1、居中问题
div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto;
2、高度问题
两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS如下
.float_bottom {
clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3、clear:both
不想受到float浮动的，就在div中写入clear:both;
4、IE浮动 margin产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
5、padding问题
Firefox设置 padding 后，div会增加 height 和 width，但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，一般FF和IE的 padding 不会有太大区别，div 的实际宽 = width + padding ，所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义。
6、div嵌套时 y轴上 padding和 marign的问题
Firefox里 y 轴上 子div 到 父div 的距离为 父padding + 子marign
IE里 y 轴上 子div 到 父div 的距离为 父padding 和 子marign 里大的一个
Firefox里 y 轴上 父padding=0 且 border=0 时，子div 到 父div 的距离为0，子marign 作用到 父div 外面
7、padding，marign，height，width解决技巧
注意是技巧，不是方法：
写好标准头
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding
8、列表类
- ul标签在Firefox中默认是有 padding值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
- ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}
9、显示类（display:block,inline） - display:block,inline两个元素
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
display:table; //for Firefox,模拟table的效果
display:block 块元素，元素的特点是：
总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子
display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子
2.鼠标手指状显示
全部用标准的写法 cursor: pointer;
10、背景、图片类
- background显示问题
全部注意补齐 width，height 属性
2.背景透明问题
最低0.47元/天 解锁文章
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
