【Web Trick 2】CSS HACK 解决浏览器兼容性问题

使用CSS HACK可以说是没办法的办法,虽然不是很推荐,但是有时必须得用,

下面罗列了一下主要用到的HACK技术:


使用 IE CSS 条件注释区分 IE 浏览器

最简单的区分 IE 浏览器的方法自然是使用他们的条件注释。如下所示:

<!--[if IE 7]>
<style type="text/css">
</style>
<![endif]-->
 
<!--[if IE 6]>
<style type="text/css">
</style>
<![endif]-->

使用 CSS 解析器 Hacks 区分 IE

/* IE */

backgroud-color:yellow\9

/* IE 7 */html > 

body #ie7{*display: block;}

 /* IE 6 */

body #ie6{_display: block;}

/* IE 8*/

background-color:yellow\0;

/* IE 9 */

background-color:blue\9\0;

使用 CSS 解析器 Hacks 区分 Firefox(FF)

@-moz-document url-prefix()
{#firefox { display: block; }}

使用 CSS 解析器 Hacks 区分Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{#safari { display: block; }}

使用 CSS 解析器 Hacks 区分Opera

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block; }}

使用 CSS 解析器 Hacks 区分Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
.font1 {color:#f00}
}

你可能感兴趣的:(【Web Trick 2】CSS HACK 解决浏览器兼容性问题)