css兼容处理

#header{
margin-top: 13px;     /* 所有浏览器都支持 */

margin-top: 13px\9;     /* IE6、IE7、IE8、IE9支持 (所有IE)*/

margin-top: 13px !important;     /* Firefox、IE7支持 */
_margin-top: 13px;     /* IE6支持 */
*margin-top: 13px;     /* IE6、IE7支持 */
+margin-top: 13px;     /* IE7支持 */
margin-top: 13px\0;     /* IE8、IE9支持 */

margin-top: 13px\9\0; /*IE9支持*/
  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效,是IE9/10的hack
}

:root .rz-dropDown {
  height: 12px//:root所有主流浏览器都支持 除IE8及以下
}


@-moz-document url-prefix() { .header_newsList { border:1.5px solid #208adb } }/*火狐单独样式*/

//背景色rgba兼容处理(IE9有问题的话就给IE9添加单独样式)
background: rgba(0, 0, 0, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000);
//opacity:0.7\9\0;

//有时php文件和jsp文件中,line-height属性对img标签不起作用,无法实现图片垂直居中,可用如下方法解决(图片宽高不是百分百的情况下)
方法1:给img添加一个同级的元素<b>标签,给b标签设置属性display:inline-block;height:100%;vertical-align:middle;给img设置vertical-align:middle即可居中
img{vertical-align:middle;}
b{display:inline-block;height:100%;vertical-align:middle}
方法2:给img定位 img{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;}

让360浏览器兼容模式以IE最高版本内核渲染页面,需要在head中加入两个meta标签

  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta name="renderer" content="webkit">


给li设置背景图(兼容IE5) 给li和ul设置均可
ul{

  list-style: square inside url('eg_arrow.gif')

}

 

 


//小于10号字体,浏览器兼容性处理
li span { display: block; width: 100%; font-size: 10px; -webkit-text-size-adjust: none;/*所有IE、火狐等都支持。除了360和高版本chrome*/ -webkit-transform: scale(0.8);/*高版本chrome和360中兼容处理方法*/ -webkit-transform-origin:top left;/*chrome和360中是将文字压缩,不加这句的话。基线是中间,就是文字压缩后会跑到中间*/ }
div{//背景图 平铺 兼容处理
 background: url("../images/body_bg2.jpg") no-repeat center center;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/body_bg2.jpg',sizingMethod='scale');
}

 

 http://www.jb51.net/css/493362.html

posted @ 2016-11-02 14:32  dongxiaolei  阅读(314)  评论(0编辑  收藏  举报