<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    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 丁克設計 閱讀(285) 評論(0)  編輯  收藏 所屬分類: CSS 技術文檔

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

    導航

    留言簿(6)

    隨筆檔案

    文章分類

    文章檔案

    搜索

    最新評論

    閱讀排行榜

    主站蜘蛛池模板: 久久国产精品免费网站| 伊人免费在线观看| 午夜老司机免费视频| 亚洲一级毛片免观看| 99久久99热精品免费观看国产| 国产av天堂亚洲国产av天堂| 免费国产叼嘿视频大全网站| 久久亚洲国产成人影院网站| 精品无码国产污污污免费网站国产| 亚洲精品成人a在线观看| ssswww日本免费网站片| 好看的亚洲黄色经典| 日日麻批免费40分钟无码| 77777_亚洲午夜久久多人| h视频在线观看免费完整版| 亚洲乱码一二三四区乱码| 成人午夜视频免费| 国产成人亚洲精品电影| 亚洲片一区二区三区| 国产在线一区二区综合免费视频| 亚洲第一页在线播放| 成年女性特黄午夜视频免费看 | 色多多A级毛片免费看| 久久亚洲国产成人精品无码区| 久章草在线精品视频免费观看| 亚洲成a人片在线观看中文app | 免费成人黄色大片| 日韩免费高清播放器| 亚洲春色另类小说| 日韩精品免费电影| 国内精品99亚洲免费高清| 亚洲欧洲国产经精品香蕉网| 国产男女猛烈无遮挡免费视频网站 | 亚洲国产成人手机在线电影bd| 在线观看人成视频免费| yellow免费网站| 亚洲人成网站在线观看播放动漫 | 一级毛片高清免费播放| 日韩精品亚洲人成在线观看| 国产高清在线精品免费软件| 成全视频在线观看免费|