首页 > 代码库 > css 兼容

css 兼容

2024-07-17 13:23:58   219人阅读

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

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*/ }

 


联系
我们