The Underscore Hack

          1. 下劃線“_”在 CSS2.1 規范中是被承認的 CSS 標識。
          2. 瀏覽器會忽略未知的 CSS 屬性。
          3. MSIE5+(Windows)會忽略 CSS 屬性名前的 “_”。

          因此,這個 CSS 的分析是,例如: _color:red。首頁, 正確的,對于 CSS2.1 規范來說是被允許的(即使軟件驗證,只支持 CSS2.0 老版本,說它是一個 Bug :他們是錯誤的,但它是正確的)。其次, 被任何瀏覽器忽略,除了 IE 。最后, 當顏色被處理:在 WinIE 中是紅色。

          如上,這就是所說的 IE 的 Bug ,特征是以簡單明了的方式建立僅對 WinIE 有效的 CSS 屬性(MacIE 沒有這樣的 Bug 和特征)。這樣很容易調整,例如被錯誤執行的位置:在 WinIE 中被調整(見例子)。

          #menu {
          position
          : fixed;
          _position
          : absolute;
          ...
          }

          同樣的方法可以用來調整 min-height 的屬性在 WinIE 中消失的現象(見例子)

          #box {
          min
          -height: 300px;
          height
          : auto;
          _height
          : 300px;
          ...
          }

          注:這是利用另外一個 WinIE 的 Bug ,當 height: auto 時處理為 overflow:visible 。詳細資料,看這篇文章《The “min-height” Hack”》

          測試環境:Windows’ MSIE 5, 5.5, 6, Opera, Mac OSX’s MSIE 5, Safari, Camino, Mozilla , Firefox。

          補充說明:標準模式下的 IE7 將不再解析下劃線開頭的屬性,但是會把它當作一個“用戶自定義”屬性。自定義屬性并不能應用到表現上,但是它會存在于文檔模型中,可以使用腳本來訪問。

          而非標準模式下的IE7依舊解析“_” Bug。






          屏蔽IE瀏覽器(也就是IE下不顯示)
          *:lang(zh) select {font:12px  !important;} /*FF,OP可見,特別提醒:由于Opera最近的升級,目前此句只為FF所識別*/
          select:empty {font:12px  !important;} /*safari可見*/
          這里select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
          僅IE7與IE5.0可以識別
          *+html  select {}
          當面臨需要只針對IE7與IE5.0做樣式的時候就可以采用這個HACK。
          僅IE7可以識別
          *+html  select {…!important;}
          當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。
          IE6及IE6以下識別
          * html  select {}
          這個地方要特別注意很多博客都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
          html/**/ >body  select {}
          這句與上一句的作用相同。
          僅IE6不識別,屏蔽IE6
          select { display /*屏蔽IE6*/:none;}
          這里主要是通過CSS注釋分開一個屬性與值,注釋在冒號前。
          僅IE6與IE5不識別,屏蔽IE6與IE5
          select/**/ { display /*IE6,IE5不識別*/:none;}
          這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。不屏蔽IE5.5
          僅IE5不識別,屏蔽IE5
          select/*IE5不識別*/ {}
          這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別,IE5.5可以識別。
          盒模型解決方法
          selct {width:IE5.x寬度; voice-family :"\"}\""; voice-family:inherit; width:正確寬度;}
          盒模型的清除方法不是通過!important來處理的。這點要明確。
          清除浮動
          select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
          在Firefox中,當子級都為浮動時,那么父級的高度就無法完全的包住整個子級,那么這時用這個清除浮動的HACK來對父級做一次定義,那么就可以解決這個問題。
          截字省略號
          select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
          這個是在越出長度后會自行的截掉多出部分的文字,并以省略號結尾,很好的一個技術。只是目前Firefox并不支持。
          只有Opera識別
          @media all and (min-width: 0px){ select {……} }
          針對Opera瀏覽器做單獨的設定。

          以上都是寫CSS中的一些HACK,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。

          IE5.x的過濾器,只有IE5.x可見
          @media tty {
          i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
          }/* */
          IE5/MAC的過濾器,一般用不著
          /*\*//*/
              @import "ie5mac.css";
          /**/
          IE的if條件Hack
          <!--[if IE]> Only IE <![endif]-->
          所有的IE可識別
          <!--[if IE 5.0]> Only IE 5.0 <![endif]-->
          只有IE5.0可以識別
          <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
          IE5.0包換IE5.5都可以識別
          <!--[if lt IE 6]> Only IE 6- <![endif]-->
          僅IE6可識別
          <!--[if gte IE 6]> Only IE 6/+ <![endif]-->
          IE6以及IE6以下的IE5.x都可識別
          <!--[if lte IE 7]> Only IE 7/- <![endif]-->
          僅IE7可識別

          以上內容可能并不全面,歡迎大家能和我一起把這些技巧都匯總起來,為以后工作的查詢提供一個方便,同時在這里感謝那些研究出這些HACK的作者們。

           

          posted on 2010-06-15 16:22 丁克設計 閱讀(284) 評論(0)  編輯  收藏 所屬分類: CSS 技術文檔

          <2025年5月>
          27282930123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567

          導航

          留言簿(6)

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          主站蜘蛛池模板: 苗栗市| 凌云县| 邢台县| 孟村| 米林县| 包头市| 安阳市| 玉环县| 凤城市| 锦屏县| 德保县| 依安县| 喀什市| 保靖县| 蚌埠市| 色达县| 依兰县| 西林县| 崇文区| 诸暨市| 当雄县| 曲麻莱县| 沈丘县| 巫溪县| 榆社县| 翼城县| 苍南县| 宣城市| 石景山区| 外汇| 新沂市| 阳高县| 衡水市| 达日县| 古丈县| 高安市| 射阳县| 南投市| 孝感市| 陵川县| 益阳市|