css hack 收集 2

來源:互聯網
上載者:User
前言

每次要找個東西都得慢慢去翻自己收集的一些東西,每次都是那麼花時間,再加上有時存放時間久遠就忘了當時是存在哪了,為了方便查詢及閱讀,決定把一些Css Hack 收集起來...

1.區別不同瀏覽器,CSS hack寫法:

區別IE6與FF:background:orange;*background:blue;區別IE6與IE7:background:green!important;background:blue;區別IE7與FF:background:orange;*background:green;區別FF,IE7,IE6:background:orange;*background:green!important;*background:blue;註:IE都能識別*;標準瀏覽器(如FF)不能識別*;IE6能識別*,但不能識別 !important,IE7能識別*,也能識別!important;FF不能識別*,但能識別!important;
  IE6 IE7 FF
* ×
!important ×

另外再補充一個,底線"_",IE6支援底線,IE7和FF均不支援底線。
於是大家還可以這樣來區分IE6,IE7,FF: background:orange;*background:green;_background:blue;
註:不管是什麼方法,書寫的順序都是FF的寫在前面,IE7的寫在中間,IE6的寫在最後面。

 

2.!important

隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>

3.IE6/IE7對FF

1.*+html 與 *html 是IE特有的標籤, firefox 暫不支援.而*+html 又為 IE7特有標籤.<style>#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */}</style>2.表達方式:+property:value測試環境:IE5,IE6 ,IE7,FF1.5,FF2.0,Opera 9,Safari 2測試結果:IE5,IE6 ,IE7瀏覽器識別;FF2.0,Opera 9,Safari 2瀏覽器不識別。結論:我們可以用"+"來實現只有IE識別的CSS Hack。比如我們要實現在IE中500px的寬度,而在其他瀏覽器480px的寬度,就可以通過"+" Hack來完成,如下:#hack {width:500px;+width:480px; /*only IE*/}3.用於內聯css##wrapper  {height:20px;   /*For Firefox*/*height:25px;  /*For IE7 & IE6*/_height:20px;  /*For IE6*/}5.IE7的hack>bodyhtml**+html這三種寫法,其中前兩種都是不合法的 CSS 寫法,在標準相容瀏覽器中被被忽略,但是 IE7 卻不這麼認為。 對於 >body ,它會將缺失的選擇符用全域選擇符 * 代替,也就是將其處理成了 *>body,而且不光對於 > 選擇符,+,~ 選擇符中這個現象也存在。對於 html* ,由於 html 和 * 之間沒有空格,所以也是一種 CSS 語法錯誤,但 IE7 不會忽略,而是錯誤地認為這裡有一個空格。對於第三種 *+html,IE7 認為 html 前面的 DTD 聲明也是一個元素,所以 html 會被選中,這三種方法中只有這一種方法是合法的 CSS 寫法,也就是說可以通過校正器的驗證,因此也是作者推薦的 hack 用法。6.IE6 不能識別html/* */ >body  #box { color: red; }IE6 字型不會變成紅色7.屏蔽IE瀏覽器(也就是IE下不顯示)*:lang(zh) select {font:12px  !important;}/*FF,OP可見,特別提醒:由於Opera最近的升級,目前此句只為FF所識別*/select:empty {font:12px  !important;}/*safari可見*/這裡select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器專屬的。8.僅IE7與IE5.0可以識別*+html  select {…}當面臨需要只針對IE7與IE5.0做樣式的時候就可以採用這個HACK。9.僅IE7可以識別*+html  select {…!important;}當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。10.IE6及IE6以下識別* html  select {…}這個地方要特別注意很多部落格都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。html/**/ >body  select {…}這句與上一句的作用相同。11.僅IE6不識別,屏蔽IE6select { display /*屏蔽IE6*/:none;}這裡主要是通過CSS注釋分開一個屬性與值,注釋在冒號前。12.僅IE6與IE5不識別,屏蔽IE6與IE5select/**/ { display /*IE6,IE5不識別*/:none;}這裡與上面一句不同的是在選擇符與花括弧之間多了一個CSS注釋。不屏蔽IE5.513.僅IE5不識別,屏蔽IE5select/*IE5不識別*/ {…}這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別,IE5.5可以識別。14.盒模型解決方案select {width:IE5.x寬度; voice-family :"/"}/""; voice-family:inherit; width:正確寬度;}盒模型的清除方法不是通過!important來處理的。這點要明確。15.盒模型解決方案select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}在Firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的HACK來對父級做一次定義,那麼就可以解決這個問題。16.只有Opera識別@media all and (min-width: 0px){ select {……} }針對Opera瀏覽器做單獨的設定。17.IE5.x的過濾器,只有IE5.x可見@media tty {i{content:"/";/*" "*/}} @import 'ie5win.css'; /*";}}/* */18.IE5/MAC的過濾器,一般用不著@media all and (min-width: 0px){ select {……} }針對Opera瀏覽器做單獨的設定
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.