CSS Hack

feifeiwoye

浏览: 14638 次

最近访客更多访客>>

tooby

suncong1024

zsy376784873

king1982

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS HTML CSSHack

什么是CSS hack 由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的一些浏览器的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，

1、CSS 内部hack（推荐使用）

2、选择器hack

3、HTML 头部引用，其中第一种最常用。 CSS 内部hack

正经的CSS是这么写的

<!DOCTYPE html>
<html>
    <head>
        <title>Test</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:1px solid #000;"></div>
    </body>
<html>

效果图如下：

上面这样的代码对于所有当前常用的浏览器都是好使的，结果应该是这样子的 image 但是在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目前标准还没有统一，各个浏览器都有自己的表现方式，有的实现，有的未实现，在前面加一些前缀以表示支持某个特定浏览器，这也是CSS 内部hack的基本原理，向上面这些简单易懂，但是真正的CSS hack 远远不止于此，因为有不死的IE6及其各种奇葩的兄弟版本。

CSS 内部hack 语法是这样的 selector{?property:value?;} ，上面代码所示的是在属性名称之前的hack

当然还有这样的

*background-color:green;

属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令（没有特殊说明，本文所有hack都是指在声明了DOCTYPE的文档的效果）

-background-color:green;

属性前面有个“-”这样的只有IE6识别

hack background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能识别

选择器hack 选择器hanck主要是针对IE浏览器，其实并不怎么常用，

语法是这样的： selector{ sRules }

针对IE9的hack可以这么写

:root .test { background-color:green; }

HTML头部引用 HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

lte：就是Less than or equal to的简写，也就是小于或等于的意思

lt ：就是Less than的简写，也就是小于的意思

gte：就是Greater than or equal to的简写，也就是大于或等于的意思

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思

例子

_background-color:red; background-color:green; 
 background-color:green; _background-color:red;

规律：先一般，再特殊。

分享到：

一对多双向关系理解 | MySQL建表，设置字段自动获取当前时间

2015-07-11 18:12
浏览 423
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS Hack

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS Hack

评论

发表评论

相关推荐

最近访客更多访客>>