CSS hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。注意: 我们通常主要考虑的浏览器有IE6、IE7、IE8谷歌浏览器(chrome)火狐(Mozilla Firefox)即可,至于我们常用的傲游、QQ的TT浏览器是用你计算机中装的系统自带浏览器的内核,所以只需要兼容以上浏览器即可兼容TT傲游浏览器。

CSS Hack常见的有三种形式:

CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。

1、属性级Hack:比如IE6能识别下划线“_”和星号“*”,IE7能识别星号“*”,但不能识别下划线”_ ”,而firefox两个都不能认识。

2、选择符级Hack:比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}

 

CSS hack三种形式:1、条件注释Hack;2、属性级Hack;3、选择符Hack

 

(一)条件注释Hack


 语法:

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

<keywords>:

if条件*包含6种选择方式:是否、大于、小于或等于、非指定版本

是否:指定是否IE或IE某个版本。关键字:空

大于:选择大于指定版本的IE版本。关键字:gt(greater than)

大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)

小于:选择小于指定版本的IE版本。关键字:lt(less than)

小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)

非指定版本:选择除指定版本外的所有IE版本。关键字:!

<version>:

目前使用的版本基本上都在IE6以上,没有必要去太过纠结过低的版本。现在IE10已经将条件注释移除,不再支持。

条件注释Hack用于选择IE浏览器以及IE浏览器不同的版本(if条件Hack是HTML级别的(包含但不仅是针对CSS的Hack,可以选择任何HTML代码块))

1、不想在非IE浏览器中看到某区域:

这样在非IE的浏览器中就不会看到p元素的代码块

<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->

2、是否:指定是否IE或IE某个版本

只有在IE浏览器中才能看到id为box的元素的字体颜色为red

<!--[if IE]>
<style>
#box{color:red;}
</style>
<![endif]-->

3、大于:选择大于指定版本的IE版本

只有在IE7以上的版本中,才能看到id为box的元素的字体颜色为red

<!--[if gt IE 7]>
<style>
#box{color:red;}
</style>
<![endif]-->

4、大于或等于:选择大于或等于指定版本的IE版本

只有在IE7及以上的版本中,才能看到id为box的元素的字体颜色为red

<!--[if gte IE 7]>
<style>
#box{color:red;}
</style>
<![endif]-->

 5、小于:选择小于指定版本的IE版本

只有在小于IE9的版本中,才能看到id为box的元素的字体颜色为red

<!--[if lt IE 9]>
<style>
#box{color:red;}
</style>
<![endif]-->

6、小于或等于:选择小于或等于指定版本的IE版本

只有在小于或等于IE9的版本中,才能看到id为box的元素的字体颜色为red

<!--[if lte IE 9]>
<style>
#box{color:red;}
</style>
<![endif]-->

 7、非指定版本:选择除指定版本外的所有IE版本

除了IE7以外的版本,都可以看到id为box的元素的字体颜色为red

<!--[if ! IE 7]>
<style>
#box{color:red;}
</style>
<![endif]-->

 

(二)属性级Hack


 语法:

selector{<hack>?property:value<hack>?;}

 符号:

_:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线(_)更为合适。

*:选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高

\9:选择IE6+

\0:选择IE8+和Opera15以下的浏览器

如果想让一段文字在IE6/7/8中分别显示不同的颜色,可以采用如下写法:

.test {
    color: #090\9; /* For IE8+ */
    *color: #f00;  /* For IE7 and earlier */
    _color: #ff0;  /* For IE6 and earlier */
}

 注意:上述Hack均需要尊姓在标准模式下,若在怪异模式下,这些Hack将会被不同版本的IE相互识别,导致失效。

 

(三)选择符级Hack


 语法:

<hack> selector{ sRules }

 常用的:

大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。

\9 :所有IE浏览器都支持

_和- :仅IE6支持

* :IE6、E7支持

\0 :IE8、IE9支持,opera部分支持

\9\0 :IE8部分支持、IE9支持

\0\9 :IE8、IE9支持

 

IE浏览器各版本 CSS hack 对照表

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0

color:red\0

红色

N

N

N

N

Y

N

Y

N

Y

N

\9\0

color:red\9\0

粉色

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;color:green;

棕色

N

N

Y

N

Y

N

Y

N

Y

Y

 

为什么不推荐不推荐使用CSS hack来解决兼容性问题

CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。因此,在设计之初,写CSS hack需要遵循以下三条原则:

  • 有效: 能够通过 Web 标准的验证
  • 只针对太古老的/不再开发的/已被抛弃的浏览器, 而不是目前的主流浏览器
  • 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则,而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此,并不推荐使用CSS hack来解决兼容性问题。
上一篇:dnscat2搭建dns隧道


下一篇:2021.03.18--2021.03.25