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

文章目錄

• CSS類層級的hack
•  CSS屬性層級的hack
• HTML代碼片斷層級的hack（僅IE識別）
• 設定元素的style樣式
• 設定元素的class屬性
• 按鈕懸停時滑鼠呈現手的形狀
• 視窗捲軸顯示問題
• line-height 屬性
• display:inline-block
• div中的文字自動換行問題
• textarea中的文字自動換行問題

css hack的使用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識別）

① <!--[if !IE]> 除IE外都可識別的代碼片斷<![endif]-->

② <!--[if IE]> 所有的IE可識別的代碼片斷 <![endif]-->

③ <!--[if IE 7]> 僅IE7可識別的代碼片斷 <![endif]-->

④ <!--[if lt IE 7]> IE7以及IE7以下版本可識別的代碼片斷<![endif]-->

⑤ <!--[if gte IE 7]> IE7以及IE7以上版本可識別的代碼片斷 <![endif]-->

用指令碼設定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之外的瀏覽器也支援。

視窗捲軸顯示問題

在使用快顯視窗或者框視窗架的時候，有時會有多餘的捲軸出現，這時需要從多個方面進行確認：

1. 快顯視窗時window.open方法參數中設定的窗樣式是否定義了scroll=yes
2. 架構標籤的屬性中是否設定了scrolling=“yes”
3. 視窗或架構內頁面的CSS中，是否對html或body的overflow進行了樣式定義，如果沒有請參考如下代碼。

html {

     margin: 0;

     padding: 0;

     overflow-x:hidden;

     overflow-y:hidden;

}

line-height 屬性

line-height行高指的是文本行的基準間的距離，即字型最底端與字型內部頂端之間的距離。如所示：

文本之間的空白距離（行距）不僅僅是行高決定的，同時也受字型大小的影響。有時侯同一行內的不同元素底邊沒有對齊，有可能就是行高不統一造成的，這時關調整高度和對齊是不夠的，還需要調整line-height屬性。

display:inline-block

display 屬性有三個值：block，inline，inline-block。其中display:block就是將元素顯示為區塊層級元素；display:inline就是將元素顯示為行內元素；display:inline-block將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。

l        block元素的特點是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度預設是它的容器的100%，除非設定一個寬度。<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子， display屬性預設值為block。

l        inline元素的特點是： 和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子， display屬性預設值為inline。

l        inline-block的元素特點：呈現為內聯對象，四周元素保持在同一行，但可以設定寬度和高度地塊元素的屬性，目前IE8、Firefox3、Opera、Safari都可以支援該屬性了。

div中的文字自動換行問題

目前控制換行是使用以下CSS：

div．content {

     word-wrap:break-word;

     overflow:hidden;

}

在 IE 、Firefox、Safari、Chrome下沒有任何問題，但是在 Opera下，長串英文會被遮住超出的內容。如果想要讓長串英文字元也自動換行，還需要設定word-break:break-all; （但是，此方式會導致普通的英文語句中的單詞會被斷開，ie下也是）。英文單詞在排版規則上不應該被斷開，長串英文字元其實就是一個比較長的單詞，自然也不需要斷開換行顯示了，所以一般不需要額外設定word-break:break-all; 。

textarea中的文字自動換行問題

在textarea中設定輸入內容的自動換行，也是在CSS中設定word-wrap:break-word;屬性。需要額外注意的是textarea元素本身有一個warp屬性，其取值含義如下：

l        off：不自動換行；

l        hard：自動硬斷行符號換行，換行標記一同被傳送到伺服器端（Opera、Chrome下不傳）；

l        soft：自動軟斷行符號換行，換行標記不會傳送到伺服器端。