4、顏色值的縮寫:
當(dāng)RGB三個顏色值數(shù)值相同時,可縮寫顏色值代碼。如:
.menu { color:#ff3333;}
可縮寫為:
.menu {color:#f33;}
四.hack書寫規(guī)范
因為不同瀏覽器對W3C標(biāo)準(zhǔn)的支持不一樣,各個瀏覽器對于頁面的解釋呈視也不盡相同,比如IE在很多情況下就與FF存在3px的差距,對于這些差異性,就需要利用css 的hack來進行調(diào)整,當(dāng)然在沒有必要的情況下,最好不要寫hack來進行調(diào)整,避免因為hack而導(dǎo)致頁面出現(xiàn)問題。
1、 IE6、IE7、Firefox之間的兼容寫法:
寫法一:
IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別*; IE6能識別*,但不能識別 !important, IE7能識別*,也能識別!important; FF不能識別*,但能識別!important; 根據(jù)上述表達,同一類/ID下的CSS hack可寫為: .searchInput { background-color:#333;/*三者皆可*/ *background-color:#666 !important; /*僅IE7*/ *background-color:#999; /*僅IE6及IE6以下*/ } 一般三者的書寫順序為:FF、IE7、IE6.
寫法二:
IE6可識別“_”,而IE7及FF皆不能識別,所以當(dāng)只針對IE6與IE7及FF之間的區(qū)別時,可這樣書寫: .searchInput { background-color:#333;/*通用*/ _background-color:#666;/*僅IE6可識別*/ }
寫法三:
*+html 與 *html 是IE特有的標(biāo)簽, Firefox 暫不支持。 .searchInput {background-color:#333;} *html .searchInput {background-color:#666;}/*僅IE6*/ *+html .searchInput {background-color:#555;}/*僅IE7*/
屏蔽IE瀏覽器:
select是選擇符,根據(jù)情況更換。第二句是MAC上safari瀏覽器獨有的。
*:lang(zh) select {font:12px !important;} /*FF的專用*/ select:empty {font:12px !important;} /*safari可見*/
IE6可識別:
這里主要是通過CSS注釋分開一個屬性與值,注釋在冒號前。
select { display /*IE6不識別*/:none;}
IE的if條件hack寫法:
所有的IE可識別:
<!–[if IE]> Only IE <![end if]–> 只有IE5.0可以識別: <!–[if IE 5.0]> Only IE 5.0 <![end if]–> IE5.0包換IE5.5都可以識別: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–> 僅IE6可識別: <!–[if lt IE 6]> Only IE 6- <![end if]–> IE6以及IE6以下的IE5.x都可識別: <!–[if gte IE 6]> Only IE 6/+ <![end if]–> 僅IE7可識別: <!–[if lte IE 7]> Only IE 7/- <![end if]–>
2、清除浮動:
在Firefox中,當(dāng)子級都為浮動時,那么父級的高度就無法完全的包住整個子級,那么這時用這個清除浮動的HACK來對父級做一次定義,那么就可以解決這個問題。
select:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }
上一頁 [1] [2] [3] [4] [5] |