css 兼容

浏览数：17 / 时间：2015年06月09日

初学前端，正在做一个项目，发现浏览器兼容问题，然后上网搜了一下，网上有很多整理的解决方法，为了以后自己看着方便，现在自己也整理一下。

1 css的hack知识

/* CSS属性级Hack */
 
color:red; /* 所有浏览器可识别*/
 
_color:red; /* 仅IE6 识别 */
 
*color:red; /* IE6、IE7 识别 */
 
+color:red; /* IE6、IE7 识别 */
 
*+color:red; /* IE6、IE7 识别 */
 
[color:red; /* IE6、IE7 识别 */
 
color:red\9; /* IE6、IE7、IE8、IE9 识别 */
 
color:red\0; /* IE8、IE9 识别*/
 
color:red\9\0; /* 仅IE9识别 */
 
color:red \0; /* 仅IE9识别 */
 
color:red!important; /* IE6 不识别!important 有危险*/
 
/* CSS选择符级Hack */
 
*html #demo { color:red;} /* 仅IE6 识别 */
 
*+html #demo { color:red;} /* 仅IE7 识别 */
 
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
 
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
 
:root #demo { color:red\9; } : /* 仅IE9识别 */
 
/* IE条件注释Hack */
 
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
 
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

2 ul和ol列表缩进

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

注：在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才 能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

3 css透明

.transparent {
       filter:alpha(opacity=50);　　/*IE*/
    -moz-opacity:0.5;　　/*老版本的Mozilla浏览器*/
    -khtml-opacity: 0.5;　　/*老版本的sAFARI浏览器*/
    opacity: 0.5;   /*CSS标准*/
}

4 css圆角

.borderRadius {
       border-radius:4px;/*css标准*/
       -moz-border-radius:4px;/* Mozilla浏览器的私有属性 */ 
       -webkit-border-radius: 5px; /* Webkit浏览器的私有属性 */ 
}

低版本的ie是不支持圆角的，也可以通过jquery来设置圆角

5 css双线凹凸边框

.border {
      border:2px outset;/*IE*/ 
      -moz-border-top-colors: #d4d0c8 white;
      -moz-border-left-colors: #d4d0c8 white;
      -moz-border-right-colors:#404040 #808080;
      -moz-border-bottom-colors:#404040 #808080; 
}

6 css阴影

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘)";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=‘#000000‘);
}

 

浏览器bug

1 ie双边距

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

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

.Float{ 
　　float:left; 
　　margin:5px;/*IE下理解为10px*/ 
　　display:inline;/*IE下再理解为5px*/ 
}

 

css 兼容,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style html 问题 方法 log display ha class style html 问题 方法 log display ha

相关文章

随机文章

您可能还喜欢

您可能还喜欢