CSS Hack

时间 2019-11-19 标签 css hack

本文目录：css

大牛们整理的CSS Hack技巧

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

菜鸟经常使用的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; 
}

其中大量使用了这个，spa

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

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

.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 。code

：“何时咱们才能忘掉使用这些 css hack ？”htm

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

：“努力成为高手吧！”