CSS hack解决方法

1.常见的CSS hack有三种方法：CSS 内部hack、选择器hack、HTML头部引用。

CSS 内部hack

常规CSS的写法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS内部hack方法</title>
    <style type="text/css" >
        .test
        {
            background-color:green;
        }
    </style>
</head>
<body>
<div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:2px solid #000;"></div>
</body>
</html>

图片1

CSS3中各浏览器常见的写法：

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate ;

CSS3内部hack语法：selector{<hack>? property:value <hack>?;}

hack可以在属性名称之前，也可以在属性名称之后。例子：将上面代码中的样式改为   *background-color：green；或者 -background-color：green；
在IE8以上的版本（包括IE8）和其他浏览器上显示效果如图2：(这不是我们想要的结果。。。。。)
图2
在属性前面添加“*” 这种写法只对IE6以前的版本生效（话说IE7也是可以，我没有试过IE7），其他浏览器 及最新版本的IE会自动忽略这条指令。

posted @ 2016-09-27 15:56 三高娘子阅读(268) 评论(0) 收藏举报

三高娘子

CSS hack解决方法

公告