hack.css,css hack是什么意思,CSS hack用法案例详解

hack.css,css hack是什么意思,CSS hack用法案例详解

本文主要介绍CSS hack使用案例的详细讲解。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容,有需要的朋友可以参考一下。

我以前对CSS hack抱着狭隘的偏见,觉得用标准方式写的代码不应该用这些“歪门邪道”。但是最近产品发布的一个小问题让我头疼了很久。最后查了资料,用CSS hack轻松解决了,我只好接受了。我不得不使用这些锋利的工具来处理神奇的IE。

什么是CSS hack

因为不同的浏览器,甚至同一款浏览器的不同版本,对CSS的理解不同,导致页面结果不一致。为不同的浏览器编写CSS代码称为CSS hack。

CSS hack常见的方式有三种:CSS内部hack、选择器hack和HTML头引用,其中第一种是最常用的。

CSS 内部hack

正经的CSS是这样写的。

!文档类型html

超文本标记语言

标题测试/标题

style type=text/css 。试验

{

背景色:绿色;

}

/风格

/头

身体

div class= test style= height:100px;宽度:100px行高:100px边距:50px边框:1px solid # 000/div

/body

超文本标记语言

这段代码适用于所有当前使用的浏览器,结果应该是这样的。

但是,其中一些单词在CSS3中很常见。

/*Mozilla内核浏览器:firefox3.5 */

-moz-transform:旋转|缩放|倾斜|平移;

/*Webkit内核浏览器:Safari和Chrome*/

-webkit-transform:旋转|缩放|倾斜|平移;

/*歌剧*/

-o-transform:旋转|缩放|倾斜|平移;

/*IE9*/

-ms-transform:旋转|缩放|倾斜|平移;

/*W3C标准*/

变换:旋转|缩放|倾斜|平移;

如果没有评论,乍一看你觉得是逆天。这样的代码管用!这种代码真的很管用。目前CSS3标准还没有统一,每个浏览器都有自己的表达方式,有些甚至实现了,有些没有。也是CSS内部黑客的基本原理,从上面很容易理解,但是真正的CSS黑客远不止这些,因为还有不朽的IE6和它的各种奇葩兄弟版本。

内部CSS hack语法如下:selector{hack?物业:valuehack?},上面的代码显示了属性名之前的hack,当然还有这个

*背景颜色:绿色;

在属性前面加一个“*”只会在IE6和7上生效,其他版本的IE和现代浏览器都会忽略这个指令(除非特别说明,本文所有hack都是指声明了DOCTYPE的文档的效果)。

-背景色:绿色;

属性前面有一个“-”,只有IE6才识别,后面有一些hack。

背景色:绿色!重要;

添加“!”属性值之后!“重要”的写法只有IE6才能识别。其他版本的IE和现代浏览器都可以识别。还有“、“”、“9”等等。又乱又烦。画一张桌子。

这就清楚多了。如果只是想在IE访问时给上面的测试DIV加一个绿色背景,可以这样写。

背景色:绿色 9;

如果你想IE6红,IE7绿等黄(当然没人这么无聊),可以这么写。

背景色:绿色;背景色:绿色;_背景色:绿色;

选择器hack

选择器hanck主要针对IE浏览器,但不常用。语法如下:hack selector{ sRules}

:根。试验

{

背景色:绿色;

}

HTML头部引用

HTML头引用比较特殊,类似于程序语句,只能在HTML文件中使用,不能在CSS文件中使用,只能在IE浏览器下执行。这段代码不仅仅是这个条件下的定义,而是视而不见,作为非IE浏览下的评论。

!默认情况下,首先调用css.css样式表

link rel= style sheet type= text/CSS href= CSS . CSS rel= external no follow /

![如果是IE 7]

!如果IE浏览器版本是7,调用ie7.css样式表

link rel= style sheet type= text/CSS href= ie7 . CSS rel= external no follow /

![endif]

![如果lte IE 6]

!如果IE浏览器版本小于或等于6,调用ie.css样式表

link rel= style sheet type= text/CSS href= ie . CSS rel= external no follow /

![endif]

Lte:小于或等于的简称,意思是小于或等于。

Lt:是小于的简称,意思是小于。

Gte:是大于或等于的缩写,意思是大于或等于。

Gt:是大于的缩写,意思是大于。

!表示不相等,与javascript中的不等式判断相同。

书写顺序

你看,你看,这么多姿势,这么一个效果,这么多种写法。什么样的书写顺序才能保证所有浏览器都得到想要的效果?CSS只要是一级的,都有重复的属性设置,后面出现的会覆盖前面出现的,所以写的时候一般都是前面写的识别能力强的。我们举个例子。

_背景色:红色;

背景色:绿色;

如果我想让IE6上的DIV为红色,其他为绿色,可以写在上面吗?试着发现所有浏览器都是绿色的,因为IE6解析的时候,第一句可以识别,背景设置为红色,但是第二句所有浏览器都识别,IE6也不例外,背景颜色设置为绿色,只好反过来写了。

背景色:绿色;

_背景色:红色;

总结出来的规律是:先一般,后特殊。有兴趣的同学可以试试下面的CSS,看看效果是不是和你想的一样。

背景色:蓝色;/*所有浏览器*/

背景色:红色 9;/*所有ie*/

背景色:黄色 0;/* ie8 */

背景色:粉色;/* ie7*/

关于CSS hack使用案例的详细解释,本文到此结束。有关CSS hack用法的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们!

hack.css,css hack是什么意思,CSS hack用法案例详解