CSS Hack

本文目录：

• 大牛们整理的CSS Hack技巧
• 菜鸟常用的CSS Hack技巧
• 实际案例

大牛们整理的CSS Hack技巧

大家都说真正的前端高手是不需要 css hack 的，看来我还慢吞吞的走在成为高手的路上，这里看了许多关于 css hack 的技巧，我没有信心整理的更好，就把链接放到这里：

• 史上最全的CSS hack方式一览 
• 浏览器兼容-CSS Hack详解
• CSS hack 速查表

菜鸟常用的CSS Hack技巧

这里把一些常用的整理到这里：

 

.hack{
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but IE6 */
    background-color:purple\0;   /* IE8 ~ 11, Opera */
    background-color:gray\9;     /* IE6 ~ 11 */
    +background-color:yellow;    /* IE6 ~ 7  */ 
    *background-color:black;     /* IE6 ~ 7  */
    background-color:blue\0/;    /* IE7 only */
    _background-color:green;     /* IE6 only */  
}

 

实际案例

每一个技术的诞生都是为了解决实际问题的， 那么我们遇到哪些实际问题时会使用 CSS Hack 来解决呢？

咱们就来拜读一下 tmall.com 的样式，结合实际问题学习 CSS Hack 。

首先 tmall.com 首页引入了四个样式文件，大概是，当然也有直接 <style> 到页面中的，这些不重要，我们还是赶紧看看他们都是如何使用 css hack 的吧。

 

body,button,input,select,textarea{
    font:12px/1.5 tahoma,arial,\5b8b\4f53;
    *line-height:1.5; 
}

 

其中大量使用了这个，

xxxx{
    ...
    *display:inline;
    *zoom:1;
    ...
}

解决 IE6~7 下的 display:inline-block; 布局带来的问题，参考链接：

• http://www.w3cplus.com/css/inline-blocks.html 
• http://www.cnblogs.com/WhiteCusp/p/3324306.html

 

.sn-mcate-bd .sn-mcate-item-bd a{
    background-position:-438px -41 px\9;
    _background-position:-438px -39px
}

 

.sn-mybrand-link{
    *background-position:-2px -24px;
    _background-position:-2px -22px
}
.sn-mobile-link{
    *background-position:-179px -24px;
    _background-position:-179px -23px
}

 

当然，这些都需要结合实际的显示效果来 hack 。

 

：“什么时候我们才能忘掉使用这些 css hack ？”

：“根据数据统计  http://tongji.baidu.cn/data/browser ~~~  额....等到世界和平的时候...   或者你成为高手的时候！”

：“努力成为高手吧！”