您现在的位置是: 首页 » 网页代码 » css hack是什么意思
网页代码

css hack是什么意思

网站优化小编十一月 5, 2019 6人已围观

css hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的误差(比如我们常说错位)的处理。下面网页制作代码教程栏目就来给大家介绍一下css hack,希望对大家有所帮助。

网站运营中栏目排名优化技巧

什么是css hack?

由于不同厂商的浏览器,比如Internet Explorer、Chrome、Mozilla Firefox、Safari等,或者是统一厂商的浏览器的不同版本,比如IE6和IE7,对CSS的解析和认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

这个时候,我们就需要针对不同的浏览器,去写不同CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中,也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!

为什么要用CSS Hack呢?

简单的说,CSS Hack的目的,就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS Hack为不同版本的浏览器定制编写不同的CSS效果。

原理:

由于不同的浏览器对CSS的支持和解析结果不一样,还由于CSS中的优先级关系,我们就可以根据这个来针对不同的浏览器来写不同的CSS。

CSS Hack 大致有3种表现形式:

注意:CSS Hack 主要针对类内部hack.

1、属性前缀法(CSS类内部 Hack)

  • 比如IE6能识别下划线"_"和星号"" ,IE7能识别星号"",但不能识别下划线,IE6-IE10都认识"\9",而Firefox这三个都不能认识。

  • 对于书写顺序的关系,一般是将识别能力强的浏览器的CSS写在后边

<style> div{      background:green;/*forfirefox*/      *background:red;/*forIE6 IE7*/  }  </style>

这样的话,就成功的对IE6,7成功的做了一个hack。

2、选择器前缀法(选择器 Hack)

  • 语法是这样的:<hack> selector{ sRules }

  • 例如:IE6能识别*html .class{} , IE7能识别 +html .class{}或:first-child+html .class{}

例如:针对IE9的hack可以这么写:

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

3、IE条件注释法(HTML 头部引用 Hack), 针对所有IE(注:IE10+已经不再支持条件注释)

HTML头部引用就比较特殊了,类似于程序语句,只能使用在HTML文件里,而不能在CSS文件中使用,并且只有在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的简写,也就是大于的意思。

  • ! :就是不等于的意思,跟javascript里的不等于判断符相同。

 <!--[if IE]>IE浏览器显示的内容<![endif]-->  <!--[if lt IE6]>只在IE6及以下版本显示的内容<![endif]-->

这类hack不仅对CSS生效,对写在判断语句里边的所有代码都会生效

还有在属性值后面添加“!important”的写法只有IE6不能识别,其它版本IE及现代浏览器都可以识别,例如:

background-color:green!important;

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:199天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2509 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们