设计师常看的CSS Hack集合

什么是 css Hack ？gPm中国设计秀

由于不同的浏览器，比如 IE6.0，IE7.0，IE8.0,Firefox 等，对 css 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的css，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的 css 代码的的过程，就叫 css Hack 。gPm中国设计秀

由于要照顾到不同的浏览器下保持完美的显示效果，经常用到 css Hack，园子把常用的一些做了一下汇总，希望能够帮助到朋友们。gPm中国设计秀
 gPm中国设计秀

区别于IE6、IE7、Firefox 的 css Hack

1
2
3

.box {margin-top:5px;} /*Firefox */
* html .box {margin-top:10px;} /*IE6*/
*+html .box {margin-top:15px;} /*IE7*/

通过上述 css Hack 可以实现在 Firefox 中上边距为5px, IE6 中上边距为10px, IE7 上边距为15px。gPm中国设计秀

屏蔽IE浏览器（也就是IE下不显示）

1
2

*:lang(zh) select {font:12px  !important;} /*FF可见*/
select:empty {font:12px  !important;} /*safari可见*/

这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。gPm中国设计秀

IE6及IE6以下识别

1

* html  select {…}

这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。gPm中国设计秀

1

html/**/ >body  select {…}

这句与上一句的作用相同。gPm中国设计秀

仅IE6不识别，屏蔽IE6

1

select { display :none; /*屏蔽IE6*/}

这里主要是通过css注释分开一个属性与值，注释在冒号前。