css兼容写法

css3

1.box-shadow:

filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*兼容ie*/

-moz-box-shadow: 2px 2px 10px #909090;/*兼容firefox*/

-webkit-box-shadow: 2px 2px 10px #909090;/*兼容safari或chrome*/

box-shadow:2px 2px 10px #909090;/*兼容opera或ie9*/

2.background-size //兼容IE8，需要引用backgroundsize.min.htc

　background:url(images/126.jpg) center no-repeat;

  background-size:cover;

　-ms-behavior:url(backgroundsize.min.htc);//相对路径

　behavior:url(backgroundsize.min.htc);//相对路径

3.css透明问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6

4.浏览器bug

4.1 IE的双边距bug

　　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

　　解决方案：在这个div里面加上display:inline;

4.2 高度不适应

　　高度不适应是当内层的对象高度发生变化时，外层高度不能自动进行调节，特别当内层对象使用margin或者padding时。

　　例如：

.box p{
　　　margin-top:20px;
　　　margin-bottom:20px;
　　　text-align:center;
}

　<div class="box">
　　　<p>p对象中的内容</p>
　</div>

　　解决方法：在P对象上下各加2个空的div对象，css代码： {height:0;overflow:hidden}，或者为div加上border属性。　　

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　　<style>
　　　　/*.box{
　　　　　　border:1px solid red;
　　　　}*/
　　　　.box div{
　　　　　　height:0px;
　　　　　　overflow:hidden;
　　　　}
　　　　.box p{
　　　　　　margin-top:20px;
　　　　　　margin-bottom:20px;
　　　　　　text-align:center;
　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　　<div class="box">
　　　　　　　<div></div>
　　　　　　　　　<p>p对象中的内容</p>
　　　　　　　<div></div>
　　　　　</div>
　　</body>
</html>