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>
