跨瀏覽器開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)（二） CSS
2024-07-11 08:26:40
供稿：網(wǎng)友
CSS類級(jí)別的hack僅IE7識(shí)別 *+html {…}
IE6及IE6以下識(shí)別 * html {…}
opera、safari、chrome識(shí)別：
@media all and (min-width: 0px){…} //Firefox3.0.6不識(shí)別，但Firefox3.6也識(shí)別該規(guī)則，如果Firefox版本有嚴(yán)格要求，請(qǐng)使用下一條規(guī)則
@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不識(shí)別該規(guī)則
僅opera識(shí)別：
@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}
CSS屬性級(jí)別的hack僅IE識(shí)別 ： margin-left:10px/9;
僅IE8識(shí)別 ： margin-left:10px/0;
IE6/IE7識(shí)別 ： *margin-left:10px;
僅IE6識(shí)別 : _margin-left:10px;
CSS Hack綜合示例：
/**add 'margin-top: -10px;' for IE7/Firefox/Opera/Safari/Chrome , 'margin-top: 5px;' for IE8 **/
.news_list01 h2 span{float: right; margin-top: 5px; *margin-top: -10px; display: inline}
@media all and (min-width: 0px){
.news_list01 h2 span{float: right; height: 19px; margin: 0 0 0 0; padding-top: 16px; padding-bottom: 0; display: inline}
}
HTML代碼片斷級(jí)別的hack（僅IE識(shí)別）① <!--[if !IE]> 除IE外都可識(shí)別的代碼片斷<![endif]-->
② <!--[if IE]> 所有的IE可識(shí)別的代碼片斷 <![endif]-->
③ <!--[if IE 7]> 僅IE7可識(shí)別的代碼片斷 <![endif]-->
④ <!--[if lt IE 7]> IE7以及IE7以下版本可識(shí)別的代碼片斷<![endif]-->
⑤ <!--[if gte IE 7]> IE7以及IE7以上版本可識(shí)別的代碼片斷 <![endif]-->
用腳本設(shè)置CSS屬性
設(shè)置元素的style樣式
Var spanElement = document.getElementById(“mySpan”);
//下面寫法保證出IE外，所有瀏覽器可用
spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
//下面的寫法保證IE可用
spanElement.style.cssText=”font-weight:bold;color:red;”;
設(shè)置元素的class屬性
Var element = document.getElementById(“myElement”);
//下面的寫法保證除IE外，所有瀏覽器可用
Element.setAttribute(“class”,”styleClass”);
//下面寫法保證IE可用
Element.setAttribute(“className”,”styleClass”);
具體CSS效果的實(shí)現(xiàn)
按鈕懸停時(shí)鼠標(biāo)呈現(xiàn)手的形狀
cursor:hand和cursor:pointer效果是一樣的，當(dāng)鼠標(biāo)移動(dòng)至該元素時(shí)呈現(xiàn)手的形狀。但是應(yīng)該盡量使用cursor:pointer而非cursor:hand，因?yàn)閏ursor:hand只有IE識(shí)別，而cursor:pointer才是CSS2.0的標(biāo)準(zhǔn)屬性，IE之外的瀏覽器也支持。
窗口滾動(dòng)條顯示問(wèn)題
在使用彈出窗口或者框窗口架的時(shí)候，有時(shí)會(huì)有多余的滾動(dòng)條出現(xiàn)，這時(shí)需要從多個(gè)方面進(jìn)行確認(rèn)：
彈出窗口時(shí)window.open方法參數(shù)中設(shè)置的窗樣式是否定義了scroll=yes
