什么是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;
规律:先一般,再特殊。
相关推荐
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
css safari浏览器识别CSS hack.docx
css hack ie6 ie7 ie8 firefox等浏览器兼容性
各浏览器CSS hack兼容表各浏览器CSS hack兼容表
10个非常有用的CSS hack,浏览器兼容性处理
史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全...
important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容 hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是,大家...
css的hack技术,跨浏览器兼容问题,想从事web前端的孩纸们快来看看啊
CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8 CSS 浏览器兼容
怎样避免使用css hack ,大家都知道css hack不符合标准
CSS Hack 浏览器兼容文档 ,用于兼容IE6、IE7、IE8、IE9、FF
各种类型 CSSHACK各种类型 CSSHACK
解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面...
技术资料\区分IE6,IE7和firefox的CSS hack-CSS教程.doc
不同浏览器、不同版本存在css的差异,CSS hack可以兼容,主要针对ie浏览器
由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。... CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。
NULL 博文链接:https://onestopweb.iteye.com/blog/2331532
搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。
CSS Hack 不得不在一些项目中运用到