div+css兼容积累

前端工作这么长的时间对于兼容性问题的解决也有了一些小小的心得，在这里稍作整理，以便日后查看，希望也能让大家少走弯路！

1、margin双间距问题

这是一个基本款的问题，出现频率较高，设置为float的div在ie下设置的margin会加倍。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/

这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline 元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 

2、在ie6、ie7下overflow失效问题

问题原因在ie6,ie7下面初始值不是overflow:visible

  ie6{overflow-x:auto;overflow-y:scroll} 

  ie7{overflow-x:visible;overflow-y:scroll}

 问题解决：在用到overflow:hidden元素的父节点增加position:reletive;

3、IE下面的宽度设置问题

问题出现的原因在于ie不支持min-，实际上，ie默认把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。

问题解决：

ie：#box{ width: 80px; height: 35px;}

非ie：html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} （注：html>body 子选择器在ie5、ie6、ie7中不会被识别）

问题延伸：

解决min-width问题除了我们之前说的那种css hack的方法之外还有一些其他的解决方法

#box{min-width:600px;width:expression(document.body.clientWidth < 600? "600px": "auto" ); }

width:expression(document.body.clientWidth < 600? "600px": "auto" ); 实际上是用javascript的方法来解决问题，虽然会让html文档看起来不正规但是解决起来还是比较有效的。

同样的原理我们可以用来解决IE实现最大宽度

#box{max-width:600px;width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");}

4、background透明问题

opacity兼容所有浏览器的写法：

 #box{ filter:alpha(opacity=50); /*for ie*/ -moz-opacity:0.5;/*for firefox*/ ; -khtml-opacity:0.5;/*for safari 1.0*/ ;opacity:0.5}

5、图片透明问题

a、png8格式图片替换png24图片（注：png8格式适用于色彩单一，纯色图标，不支持半透明）

b、css滤镜:  _background:transparent;

           _filter:progid:DxImageTransform.Microsoft.AlphaImageLoader(src='img/nav.png',sizimgMethod='scale')

6、box-shadow标签的兼容性问题

box-shadow:h-shadow v-shadow blur spreed clor inset(注:默认为outset)

     兼容:ie9+、firefox4、chrome、oprera、safire 5.1.1

     解决: -moz-box-shadow:  

-webkit-box-shadow:

       box-shadow:

filter:progid:DxImageTransform.Microsoft.Shadow( color='#969696' ,Direction=135, Strength=5);  

/*for ie6、ie7、ie8*/135是模拟投影角度,0是右边出投影，90是上边出投影；滤镜里面的颜色必须写完成的；另外阴影面积计算在盒子面积内

7、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> 

8、无法定义<10px高度的盒子

为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px