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

html-css026

什么是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*/