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

本文链接：https://blog.youkuaiyun.com/dengbodb/article/details/8255629

本文深入探讨了CSS Hack技术，特别关注如何使用条件注释和CSS解析器Hacks来区分和适配不同的浏览器，如IE、Firefox、Safari、Opera和Chrome，以确保网页在各种浏览器上都能呈现出一致且优化的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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}
}