CSS Hack技术解决多浏览器兼容问题是怎样的
本篇文章为大家展示了CSS Hack技术解决多浏览器兼容问题是怎样的，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
向大家描述一下如何使用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的运作情况。
<pidpid="opera">我来自Opera7.2-9.5</p> <pidpid="safari">我是神奇的Safari</p> <pidpid="firefox">我来自Firefox</p> <pidpid="firefox12">我是FF前辈Firefox1-2</p> <pidpid="ie7">我是IE7</p> <pidpid="ie6">我是残品IE6</p>然后我让这些P标签默认都不显示
<styletypestyletype="text/css"> bodyp{display:none;} </style>使用IE CSS条件注释区分IE浏览器
最简单的区分IE浏览器的方法自然是使用他们的条件注释。微软创建了一个强大的语法来让我们去实现这个功能。我不想再详细地介绍IE条件注释了，我想你在搜索引擎能搜索到上万个搜索条目，我这里只要这两个：
<!--[ifIE7]> <styletypestyletype="text/css"> </style> <![endif]--> <!--[ifIE6]> <styletypestyletype="text/css"> </style> <![endif]-->使用CSS解析器Hacks区分IE
虽说IE条件注释十分简单好用，但是如果你想把全部的CSS放到一个文件里的话，那么你不得不使用别的方法。注意这里的IE7Hack将只对IE7有效，因为IE6根本不知道>选择符。同时你也得注意>选择符对于其他浏览器同样是无效的。
html>body#ie7 {*display:block;} body#ie6 {_display:block;}CSS Hack区分Firefox
***个使用了body:empty来区分Firefox1和2。第二个hack使用了全部Firefox浏览器的专有扩展-moz。-moz只对Firefox有效，使用这个Hack大可不必担心其他浏览器的影响。
body:empty#firefox12 {display:block;} @-moz-documenturl-prefix() {#firefox{display:block;}}CSS Hack区分Safari
Safari的CSS Hack与Firefox的hack看起来很像，使用的是Safari浏览器的专有扩展-webkit且只对Safari浏览器有效。
@mediascreenand(-webkit-min-device-pixel-ratio:0) {#safari{display:block;}}CSS Hack区分Opera
@mediaalland(-webkit-min-device-pixel-ratio:10000), notalland(-webkit-min-device-pixel-ratio:0) {head~body#opera{display:block;}}然后，全部合在一起便是完整代码：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <htmllanghtmllang="en"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>CSSBrowserHacks</title> <styletypestyletype="text/css"> bodyp { display:none; } html:first-child#opera { display:block; } html>body#ie7 { *display:block; } body#ie6 { _display:block; } body:empty#firefox12 { display:block; } @-moz-documenturl-prefix() { #firefox{display:block;} } @mediascreenand(-webkit-min-device-pixel-ratio:0) { #safari{display:block;} } @mediaalland(-webkit-min-device-pixel-ratio:10000), notalland(-webkit-min-device-pixel-ratio:0) { head~body#opera{display:block;} } </style> </head> <body> <pidpid="opera">我来自Opera7.2-9.5</p> <pidpid="safari">我是神奇的Safari</p> <pidpid="firefox">我来自Firefox</p> <pidpid="firefox12">我是FF前辈Firefox1-2</p> <pidpid="ie7">我是囧IE7</p> <pidpid="ie6">我是残品IE6</p></body> </html>CSS Hack虽好且方便兼容各浏览器，但是通不过W3C验证，所以还得自己权衡是否有必要去使用。
上述内容就是CSS Hack技术解决多浏览器兼容问题是怎样的，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
