什么是Css Hack?ie6,7,8的Hack分别是什么?

html-css012

什么是Css Hack?ie6,7,8的Hack分别是什么?,第1张

在我们制作页面时CSS hack由于不同的浏览器,比如Internet Explorer,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

CSS Hack大致有3种表现形式,属性级Hack、选择器Hack以及IE条件Hack

注意:尽可能减少对CSS Hack的使用。

原理:

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

IE hack

代码如下:

<!--[if <keywords>? IE <version>?]>

HTML代码块

<![endif]-->

针对不同的浏览器写不同的 CSS code 的过程,就是 CSS hack。

示例如下:

#test{

Width:300px

Height:300px

background-color:blue

}

#test{

width:300px

height:300px

background-color:blue/*firefox*/

background-color:red\9/*all ie*/

background-color:yellow/*ie8*/

+background-color:pink/*ie7*/

_background-color:orange/*ie6*/ }

:root #test { background-color:purple\9} /*ie9*/

@media all and (min-width:0px)

{ #test {background-color:black} } /*opera*/

@media screen and (-webkit-min-device-pixel-ratio:0)

{ #test {background-color:gray} } /*chrome and safari*/

楼主说到的方法一:

/*

ie6

\*/

*

html

{

我找到的方法之一;这里加上

\,有什么好处?}

/*

end

*/

一般\不是你那个位置加的

,不过我可以解释一下在那里加的好处:

本来/**/是构成注释块的,就是里面的内容全部不执行。但ie6,以及windows

ie6以下的浏览器不叫“聪明”,它解析到\*/

的时候,就以为解析完了,因此执行中间的的内容,所以,中间的*html{}

代码被执行。

但你这种用法比较作用比大,以为*html已经起到选择ie6浏览器的左右了。其实"\"我们比较用的多是这样的。

\.element{}

或者

.e\lement{}

或者

.element{wi\th:123px}

这三个例子都系应用ie6不识别\而运动代码。下面给一个应用例子说明一下:

.element{width:123px}

/*element的宽为123px,这个ie6

ie7

ff上面都表现为123px*/

\.element{width:100px}

/*ie7

ff识别\知道它是没用的符号,不赋予执行,而ie6当\没出现,因此宽为100px,*/

通过这个例子,我们就可以筛选出ie6了。.e\lement和.element{wi\th:123px}的应用同理。

不过建议不要使用\来筛选ie6,因为在系统里面\n

\r

这些都是有特别的意思的,呵呵,这里就不详细说明了,为了不出现不必要的麻烦,还是用著名的hack

——

starHTML来筛选ie6吧。

starHTML就是我们经常用的*html{}了。

对于楼主提及的方法二:

*

html

{

这就是IE6专用的?}

其实也可以说*html是ie6专用。因为ie7已经修复了这个hack了。至于为什么一定是*html而不是¥HTML

@html

或者系其他呢?就要问微软的设计师为什么才知道了。不过可以说说css的hack的原理吧。

CSS

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

举一个例子吧,希望通过这个例子,你可以感觉到*html这个hack的原理吧。

*+html{}是ie7的专属筛选hack。为什么中间有个+号呢,

因为+是相邻选择符,相邻选择符ie6不支持,不过ie7支持,因此,就可以筛选出应用于ie7的语句了。

关于css

hack,实在涉及的东西比较广,如果你有兴趣,可以联系一下我。我怕我说了一堆话,看了也糊涂了,呵呵。希望对你有帮助啦。