浏览器兼容问题汇总及实例解析

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。

不同浏览器之间的兼容，目前没有太多简单的方法，只有根据每个浏览器进行调整，以下是我收集汇总的一些常见浏览器兼容问题及解决方案。

1、css设置透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 
FF：opacity:0.6。 
[注] 最好两个都写，并将opacity属性放在下面。 

2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 。而！important的写法应该如：

div{height:XXX !important; height: xxx;}

3、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法： 

div{margin:30px!important;margin:28px;}

4、ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px; 
其中margin属性对IE有效，padding属性对FireFox有效。

5、div 的垂直居中问题

 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 

6、统一使用 cursor:pointer  少用 cursor:hand ，因为 firefox不支持hand，但ie支持pointer

7、margin加倍的问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 

8、 浮动 ie 产生的双倍距离

 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}    这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;  

9、 IE 与宽度和高度的问题

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。    比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：    #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}  

10、 DIV 浮动 IE 文本产生 3 象素的 bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.    #box{ float:left; width:800px;}   #left{ float:left; width:50%;}   #right{ width:50%;}   *html #left{ margin-right:-3px; //这句是关键}    <div id="box">   <div id="left"></div>   <div id="right"></div>   </div> 

11、IE6下为什么图片下有空隙产生

解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.  

12、 对齐文本与文本输入框

加上 vertical-align:middle; <style type="text/css"> <!-- input {      width:200px;      height:30px;      border:1px solid red;      vertical-align:middle; } --> </style>  13、LI中内容超过长度后以省略号显示的方法

此方法适用与IE与OP浏览器 <style type="text/css"> <!-- li {      width:200px;      white-space:nowrap;      text-overflow:ellipsis;      -o-text-overflow:ellipsis;      overflow: hidden;      } --> </style>  

14、 让层显示在 FLASH 之上

FLASH设置透明 <param name="wmode" value="transparent" />  

15、 怎样使一个层垂直居中于浏览器中

 这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二 <style type="text/css"> <!-- div {      position:absolute;      top:50%;      lef:50%;      margin:-100px 0 0 -100px;      width:200px;      height:200px;      border:1px solid red;      } --> </style>