WEB前端开发必备之浏览器兼容性处理方法大全

浏览器兼容性处理方法大全

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;overfl ow: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问题

FF设置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的问题

FF里y 轴上子div 到父div 的距离为父padding + 子marign

IE里y 轴上子div 到父div 的距离为父padding 和子marign 里大的一个

FF里y 轴上父padding=0 且border=0 时，子div 到父div 的距离为0，子marign 作用到父div 外面

7、padding，marign，height，width的傻瓜式解决技巧

注意是技巧，不是方法：

写好标准头

“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height 不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

8、列表类

1. ul标签在FF中默认是有padding值的，而在IE中只有margin有值

先定义ul {margin:0;padding:0;}

2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成:

{list-style:none;margin:0px;padding:0px;}

9、显示类（display:block,inline）

1. display:block,inline两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度

，

，

，

，

和
• 是块元素的例子

  display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。，，，，， 和 是inline 元素的例子

  2.鼠标手指状显示

  全部用标准的写法cursor: pointer;

  10、背景、图片类

  1. background显示问题

  全部注意补齐width，height 属性

  2.背景透明问题

  IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

  IE: filter: alpha(opacity=10);

  FF: opacity:0.6;

  FF: -moz-opacity:0.10;

  最好两个都写，并将opacity属性放在下面

  11、min-height最小高度的实现（兼容IE6、IE7、FF）

  作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。

  #mrjin {

  background:#ccc;

  min-height:100px;

  height:auto !important;

  height:100px;

  overflow:visible;

  }

  12、著名的Meyer Reset（重置）

  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td

  {

  margin: 0;