跨瀏覽器開發經驗總結（二） CSS

2024-07-11 08:46:46

字體：大中小

來源：轉載

供稿：網友

CSS類級別的hack僅IE7識別 *+html {…}

IE6及IE6以下識別 * html {…}

opera、safari、chrome識別：

@media all and (min-width: 0px){…} //Firefox3.0.6不識別，但Firefox3.6也識別該規則，如果Firefox版本有嚴格要求，請使用下一條規則

@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不識別該規則

僅opera識別：

@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}

CSS屬性級別的hack僅IE識別： margin-left:10px/9;

僅IE8識別： margin-left:10px/0;

IE6/IE7識別： *margin-left:10px;

僅IE6識別 : _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代碼片斷級別的hack（僅IE識別）① 
② 
③ 
④ 
⑤ 
用腳本設置CSS屬性
設置元素的style樣式
Var spanElement = document.getElementById(“mySpan”);
//下面寫法保證出IE外，所有瀏覽器可用
spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);
//下面的寫法保證IE可用
spanElement.style.cssText=”font-weight:bold;color:red;”;
設置元素的class屬性
Var element = document.getElementById(“myElement”);
//下面的寫法保證除IE外，所有瀏覽器可用
Element.setAttribute(“class”,”styleClass”);
//下面寫法保證IE可用
Element.setAttribute(“className”,”styleClass”);
具體CSS效果的實現
按鈕懸停時鼠標呈現手的形狀
cursor:hand和cursor:pointer效果是一樣的，當鼠標移動至該元素時呈現手的形狀。但是應該盡量使用cursor:pointer而非cursor:hand，因為cursor:hand只有IE識別，而cursor:pointer才是CSS2.0的標準屬性，IE之外的瀏覽器也支持。
窗口滾動條顯示問題
在使用彈出窗口或者框窗口架的時候，有時會有多余的滾動條出現，這時需要從多個方面進行確認：
彈出窗口時window.open方法參數中設置的窗樣式是否定義了scroll=yes
框架標簽的屬性中是否設置了scrolling=“yes”
窗口或框架內頁面的CSS中，是否對html或body的overflow進行了樣式定義，如果沒有請參考如下代碼。

復制代碼

上一篇：CSS min-height IE6、IE7、FF下DIV自適應高度

下一篇：魔哥css圓角實現代碼（代碼精簡，完全自適應）