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 ~~~  額....等到世界和平的時候...   或者你成爲高手的時候！」

：「努力成爲高手吧！」