.Index_bottom { } /*通用*/
@media screen and (min-width:0) {.Index_bottom { display:none\9; }/*? for IE9/IE10 */? }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .Index_bottom { display:block; }/*? for IE10 */ }
針對IE8的css hack
之前對css hack做過一個簡單的匯總《CSS hack 匯總》兔跌,現(xiàn)在進(jìn)行一些更新:
“\9″? 只在IE6/IE7/IE8/IE9/IE10下生效
“\0”? 只在 IE8/IE9/IE10下生效
“\9\0”只在IE9/IE10下生效
故目前如果需要只針對ie8的hack综苔,可先使用在IE8/IE9/IE10生效的“\0”,再用僅在IE9/IE10生效的“\9\0”hack覆蓋之前的樣式徐勃。
如
selector{
color:#000;
color:#F00\0;? /* only for IE8&IE9&IE10 */
color:#000\9\0; /* only for IE9&IE10 */
}
1, IE條件注釋法间校,微軟官方推薦的hack方式愉舔。
selector{
background-color:#f00;/*all*/
background-color:#0ff\0;/* ie 8/9 */
background-color:#0f0\9\0;/* ie9 */
*background-color:#00f;/*ie7*/
+background-color:#00f; /*ie7*/
_background-color:#ff0;/*ie6*/
background-color//:#090;/*非IE*/
background-color:#900\0;/*所有ie*/
}
border:2px solid #00f;? ? /*IE个曙、ff的屬性*/
border:2px solid #090\9;? /* IE6/7/8的屬性 */
border:2px solid #F90\0;? ? /* IE8支持 */
*border:2px solid #F00;? ? /* IE6、7支持 */
_border:2px solid #f00;? ? /*IE6的屬性*/
CSS hack:針對IE6待逞,IE7甥角,firefox顯示不同效果
做網(wǎng)站時經(jīng)常會用到,衡量一個DIV+CSS架構(gòu)師的水平時识樱,這個也很重要嗤无。
區(qū)別不同瀏覽器的CSS hack寫法:
區(qū)別IE6與FF:
background:orange;*background:blue;
區(qū)別IE6與IE7:
background:green !important;background:blue;
區(qū)別IE7與FF:
background:orange; *background:green;
區(qū)別FF,IE7牺荠,IE6:
background:orange; *background:green!important;*background:blue;
注:IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*翁巍;
IE6能識別*,但不能識別 !important,
IE7能識別*休雌,也能識別!important;
FF不能識別*灶壶,但能識別!important;
IE6? IE7 FF
*? √ √ ×
!important × √ √
------------------------------------------------------
另外再補充一個,下劃線"_",
IE6支持下劃線杈曲,IE7和firefox均不支持下劃線驰凛。
? ? ? ? ? ? ? ? ? IE6 ?IE7 ?FF
?* ? ? ? ? ? ? ? ?√ ? ?√ ? ?×
!important × ? ? √ ? ? √
_ ? ? ? ? ? ? ? ?√ ? ? ?× ? ? ×
于是大家還可以這樣來區(qū)分IE6,IE7担扑,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法恰响,書寫的順序都是firefox的寫在前面,IE7的寫在中間涌献,IE6的寫在最后面胚宦。
CSS HACK
以下兩種方法幾乎能解決現(xiàn)今所有HACK. 1, !important 隨著IE7對!important的支持, !important 方法現(xiàn)在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}2, IE6/IE77對FireFox *+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
}
注意: *+html 對IE7的HACK 必須保證HTML頂部有如下聲明:
《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"》
.opacity{
filter:alpha(opacity=50);/*IE*/
-moz-opacity:0.5;/*老版Mozilla*/
-khtml-opacity:0.5;/*老版Safari*/
opacity:0.5;/*支持opacity的瀏覽器*/}