本文向大家描述一下如何使用CSS Hack技巧解决DIV+CSS布局多浏览器兼容问题，针对不同的浏览器写不同的CSS代码的过程，就叫CSS Hack，相信本文介绍一定会让你有所收获。

CSS Hack技巧汇总

CSS Hack简介

我们在用DIV+CSS制作网页时，由于不同的浏览器，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等对CSS的支持及解析结果不一样，导致生成的页面效果不一样，得不到我们所需要的页面效果。这时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS代码的过程，就叫CSS Hack。

为了向你展示这些CSS Hack是否正常运作，我新建六个P标签，并给每一个P标签一个特有的id。这将向你展示CSS Hack的运作情况。

我来自Opera7.2-9.5
 
我是神奇的Safari
 
我来自Firefox
 
我是FF前辈Firefox1-2
 
我是IE7
 
我是残品IE6
 
 

然后我让这些P标签默认都不显示

 
bodyp{display:none;}  
 
 

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

最简单的区分IE浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍IE条件注释了，我想你在搜索引擎能搜索到上万个搜索条目，我这里只要这两个：

#p#使用CSS解析器Hacks区分IE

虽说IE条件注释十分简单好用，但是如果你想把全部的CSS放到一个文件里的话，那么你不得不使用别的方法。注意这里的IE7Hack将只对IE7有效，因为IE6根本不知道>选择符。同时你也得注意>选择符对于其他浏览器同样是无效的。

/*IE7*/  
html>body#ie7  
{*display:block;}  
 
/*IE6*/  
body#ie6  
{_display:block;}  
 

CSS Hack区分Firefox

***个使用了body:empty来区分Firefox1和2。第二个hack使用了全部Firefox浏览器的专有扩展-moz。-moz只对Firefox有效，使用这个Hack大可不必担心其他浏览器的影响。

/*Firefox1-2*/  
body:empty#firefox12  
{display:block;}  
 
/*Firefox*/  
@-moz-documenturl-prefix()  
{#firefox{display:block;}}  

CSS Hack区分Safari

Safari的CSS Hack与Firefox的hack看起来很像，使用的是Safari浏览器的专有扩展-webkit且只对Safari浏览器有效。

/*Safari*/  
@mediascreenand(-webkit-min-device-pixel-ratio:0)  
{#safari{display:block;}}  
 

 #p#CSS Hack区分Opera

/*Opera*/  
@mediaalland(-webkit-min-device-pixel-ratio:10000),  
notalland(-webkit-min-device-pixel-ratio:0)  
{head~body#opera{display:block;}}  
 

然后，全部合在一起便是完整代码：

 
"http://www.w3.org/TR/html4/strict.dtd"> 
 
 
 
 
 
bodyp  
{  
display:none;  
}  
/*Opera*/  
html:first-child#opera  
{  
display:block;  
}  
/*IE7*/  
html>body#ie7  
{  
*display:block;  
}  
/*IE6*/  
body#ie6  
{  
_display:block;  
}  
/*Firefox1-2*/  
body:empty#firefox12  
{  
display:block;  
}  
/*Firefox*/  
@-moz-documenturl-prefix()  
{  
#firefox{display:block;}  
}  
/*Safari*/  
@mediascreenand(-webkit-min-device-pixel-ratio:0)  
{  
#safari{display:block;}  
}  
/*Opera*/  
@mediaalland(-webkit-min-device-pixel-ratio:10000),  
notalland(-webkit-min-device-pixel-ratio:0)  
{  
head~body#opera{display:block;}  
}  
 
 
 
 
我来自Opera7.2-9.5
 
我是神奇的Safari
 
我来自Firefox
 
我是FF前辈Firefox1-2
 
我是囧IE7
 
我是残品IE6
 
 
 

 CSS Hack虽好且方便兼容各浏览器，但是通不过W3C验证，所以还得自己权衡是否有必要去使用。

【编辑推荐】

1. 兼容IE6,IE7,IE8,Firefox的CSS HACK写法
2. CSS display:inline和float:left两者区别
3. CSS HACK区别IE6、IE7、IE8、Firefox兼容性
4. JS在IE和Firefox兼容性问题及解决方案
5. IE8浏览器中正式版CSS hack技术用法