css兼容

knight_black_bob

浏览: 853533 次
性别:
来自: 北京

最近访客更多访客>>

bian1024

lli

cqh520llr

hxgdragon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css 前端兼容

1.css中兼容ie相关语法

1.解决padding

padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */

2.background-color:

background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9;    /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF;        /*IE6、IE7会变为蓝色*/
_background-color: #009933;        /*IE6会变为绿色*/

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

3.position:fixed(解决ie6)

body {
_background-image: url(about:blank);     /*用浏览器空白页面作为背景*/
_background-attachment: fixed;     /* prevent screen flash in IE6 确保滚动条滚动时，元素不闪动*/
}
#topNav {
width: 980px;
z-index: 100;                                                     /*设置浮动层次*/
overflow: visible;
position: fixed;
top: 50px;
left: 50px;              /* 其他浏览器下定位，在这里可设置坐标*/
_position: absolute;                                       /*IE6 用absolute模拟fixed*/
_top: expression(documentElement.scrollTop + 50 + "px"); /*IE6 动态设置top位置*/
_left: expression(documentElement.scrollLeft + 50 + "px"); /*IE6 动态设置top位置*/
/* documentElement.scrollTop 设置浮动元素始终在浏览器最顶，可以加一个数值达到排版效果 */
background-color:#0000FF;
height: 31px;
}

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性

4.平角阴影与翘边阴影

平角阴影
-webkit-box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
  -o-box-shadow: 0px 8px 20px rgba(0,0,0,0.6);
翘边阴影 
 -webkit-transform: skew(12deg) rotate(4deg);
  -moz-transform: skew(12deg) rotate(4deg);
  -o-transform: skew(12deg) rotate(4deg);
  -ms-transform: skew(12deg) rotate(4deg);

img{background: #fff;

-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";

*filter:
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)
progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6);
}

5.border-radius

box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

6.z-index (ie 7 )

IE7的z-index
#container { position: relative; z-index:30;}
#box1 { position: absolute; top: 100px; left: 510px; width: 200px; height: 200px; background-color: yellow; }
//box1有没有z-index都无所谓了，但必须同position（relative或absolute）使用,就跟一个人
#box2 { position: absolute; top: 50px; left: 460px; width: 200px; height: 200px; background-color: lime; z-index: 20; }

----------通用解决方法----------------------------------------------------------------------------------------------------------

.all-goods{ position:absolute; left:53px; top:157px; _left:68px; _top:168px;
width:168px;background:#ffffff;border: solid #2cad00;border-width: 0 2px 2px;
overflow: visible;z-index:999;display:none}
/*解决火狐 Firefox*/
@-moz-document url-prefix(){.all-goods{position:absolute; left:74px; top:157px;}}
/*解决火狐 chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {.all-goods{position:absolute; left:74px; top:157px;}}

IE8是可以和IE7兼容的，简单一行代码，让IE8自动调用IE7的渲染模式
只需要在页面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。

<metahttp-equiv=“X-UA-Compatible”content=“IE=8″>
Google Chrome Frame也可以让IE用上Chrome的引擎:
<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>
强制IE8使用IE7模式来解析
<metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode –>
//或者
<metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode –>
强制IE8使用IE6或IE5模式来解析
<metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode –>
<metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode –>
如果一个特定版本的IE支持所要求的兼容性模式多于一种，如：
<metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>

ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式（推荐）
<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式
<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式
<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>