hack.css(hack仓库)（ 学会 CSS Hack 就够了）

hack.css ，我的CSS秘密武器！

兄弟姐妹们！你们是不是也跟我一样
，被各种奇葩的浏览器兼容性问题折磨得头秃？什么？你说你写个网站，在 Chrome 上美美的 ，一到 IE 就成了“艺术品 ”？哈哈，别闹了
，谁还没遇到过这糟心事！不过，今天我就要给大家介绍我的“秘密武器
”——hack.css！

说白了 ，hack.css 就是针对不同浏览器
，写不同的 CSS 代码，来实现兼容性。就好像给每个浏览器量身定制了一套衣服 ，让它们穿上都美美的 。别以为这很难
，其实只要掌握几个简单的技巧，就能轻松玩转 hack.css！

1. 浏览器前缀大揭秘

我们得认识一下不同浏览器的“秘密代号”
。比如 ，我们想让一个元素在 Chrome 和 Safari 上显示圆角
，就要用 -webkit-border-radius 这个前缀，而在 Firefox 上 ，则要使用 -moz-border-radius。

表格来啦！

有了这些前缀
，我们就可以针对不同浏览器，写不同的 CSS 代码了 。比如 ，我们要让一个按钮在所有浏览器上都显示圆角，可以写成这样：

css

button {

border-radius: 5px; / 默认圆角 /

1.webkit-border-radius: 5px; / Chrome 和 Safari /

2.moz-border-radius: 5px; / Firefox /

3.ms-border-radius: 5px; / IE /

4.o-border-radius: 5px; / Opera /

2. 条件注释
，精准打击！

有时候，我们可能只需要针对某一个浏览器进行特殊处理 ，这时就可以用条件注释来帮忙。条件注释就像是一把精准的狙击枪
，可以对指定的浏览器进行攻击，哈哈 ，不对
，是“特殊照顾 ”！

比如，我们想让 IE 浏览器下的一个元素隐藏 ，就可以写成这样：

html

这样
，只有 IE 浏览器才会解析这段 CSS 代码，其他浏览器则会直接忽略它
。

3. 过滤器 ，IE 的“秘密武器”

对于 IE 浏览器
，还有更高级的技巧——过滤器。过滤器可以实现一些特殊的视觉效果，比如模糊 、阴影
、透明度等等 。

比如 ，我们要让一个元素在 IE 浏览器下显示半透明效果，就可以写成这样：

css

.ie-transparent {

filter: alpha(opacity=50); / IE 浏览器 /

opacity: 0.5; / 其他浏览器 /

怎么样？是不是觉得 hack.css 很神奇？其实
，这只是 hack.css 的冰山一角
。还有很多其他技巧，比如使用 通配符、使用 !important 等等。

4. hack.css 的“副作用
”

当然 ，使用 hack.css 也有一些“副作用” 。代码可能会变得很复杂
，不利于维护
。不同的浏览器可能存在兼容性需要不断测试和调试。

但是，如果我们能熟练掌握 hack.css 的技巧 ，就能轻松应对各种浏览器兼容性让我们的网站在各种浏览器上都完美呈现 。

那么
，你对 hack.css 有什么问吗？快来一起讨论吧！