<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

            孝感風信網絡科技有限公司微信公眾號

            當前位置:主頁 > 技術支持 > HTML5/CSS3 > css ie6,ie7,ie8 兼容性寫法,CSS hack寫法

            css ie6,ie7,ie8 兼容性寫法,CSS hack寫法

            時間:2024-05-14來源:風信官網 點擊: 766次

            margin-bottom:40px;       /*ff的屬性*/
            margin-bottom:140px\9;    /* IE6/7/8的屬性 */
            color:red\0;              /* IE8支持 */
            *margin-bottom:450px;     /*IE6/7的屬性*/  +margin-bottom:450px;
            _color:#ff0000;         /* 只ie6支持 */


            #1 { color: #333; } /* FF環境 */
            * html #1 { color: #666; } /* IE6環境 */
            *+html #1 { color: #999; } /* IE7環境 */

            ================================================================================

            三、CSS hack寫法

                書寫順序為FireFox在最前,其次是IE8、IE7,最后是IE6。    

                   color:red;//所有瀏覽器

                  color:blue\9;//所有IE

                  +color:orange;//IE7

                  _color:green;//IE6

                若瀏覽器為FireFox,那么color:red;若瀏覽器為IE8,根據CSS優先性原則,color:blue;若為IE7,color:orange;若為IE6,則color:green。

                IE6識別 * 、_

                IE7識別 * 、+

                IE8識別 * 、\9,\0

                只有IE8識別  \0/   

                ie9只識別:\9

                FF什么都不識別

             

            1. .test{
            2.         color:#09F\0; /* IE8/9 */
            3.         color:#09F\0/; /* IE8 only */
            4. }
            5. :root .test { color:#963\9; } /* IE9 only */
            6. /*或者下面的,但是下面的優先級小于上面的。Ps:老外的方法都是\0,根本沒考慮Opera*/
            7. @media all and (min-width:0){
            8.     .test{color:red\9; }/* IE9 only */
            9. }


            <html>
                <body>
                    <div style="border: 1px solid red; width: 300px; padding: 10px;">
                        在Firefox中,div的完整寬度是padding+width,因此width: 300px; padding: 10px;的實際寬度是320px;而在IE6中,div的完整寬度是width,所以

            這個div和下面的div寬度一致。
                    </div>
                    <div style="border: 1px solid red; width: 300px;">
                        寬度為300px的div
                    </div>
                    <div style="border: 1px solid red; width: 280px !important; width: 300px; padding: 10px;">
                        通過借助!important標記,可以設置Firefox中的width值為IE6中的width值減去padding值,這樣就實現了Firefox與IE6的padding效果尺寸兼容。
                    </div>
                </body>
            </html>

             

            ==================================================================================


            DOCTYPE標準firfox與ie6 padding的問題

            首先我們說說firefox和IE對CSS的寬度顯示有什么不同:
              其實CSS ’width’ 指的是標準CSS中所指的width的寬度,在firefox中的寬度就是這個寬度。它只包含容器中內容的寬度。而Internet Explorer ’width’

            則是指整個容器的寬度,包括內容,padding ,border。
            Firefox中:容器占的寬度=內容寬度+padding寬度+border寬度
            IE中:內容寬度=您定義的容器寬度(Internet Explorer ’width’)-padding寬度-border寬度

              所以,如果IE中定義 width:120px;padding:5px 的話,所顯示的寬度就是120px.
              即padding:5px是在width里面。
              而Firefox中,上面這個定義,顯示寬度就是 125 px;
              所以,我們就必須這樣定義
              
            width:115px !important;width:120px;padding:5px;

            必須注意的是, !important; 一定要在前面。 
             
            除了在不同的瀏覽器上會有這個問題,還有可能是在編碼時引用了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

            這個頭,他在ie瀏覽器下要支持w3標準,w3的padding和firfox標準相同,所以也會出現上面的情況

             

            =====================================================================================


            網站如何同時兼容IE6、IE7、IE8

            第一招:給常用CSS規定屬性值。
            body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
            img{border:0px;}
            ul {margin:0px;padding:0px;}/
            ul li {list-style:none;}
            上面的建站常用代碼就相是格式化CSS樣式,讓各瀏覽器按照我們設置的屬性值渲染網頁

            第二招:IE和FF下對象居中問題
            IE下大家應該知道只要設置body{text-align:center;}這樣就可以居中顯示。
            但是這樣的方法在FF不行的。這里就需要給修改成body:{text-align:center;margin:0px auto;}Margin的意思就是上下距離為0像素,左右為自動。所以FF就會居

            中顯示。

            第三招:垂直居中(僅只用于一行)
            比如說一個高30px的div,問題默認是會顯示在左上角,如果想垂直居中對其可以加個line-height:30px;樣式。如果你想讓他居下方則在修改line-height:30px;

            數值越大越局下,為了防止撐破層,還需要再給一個樣式overflow:hidden;(超出的部分不顯示)

            第四招:給每一個塊對象設置三個樣式
            width:**px;height:**px;overflow:hidden;即便高、寬是屬性值是自動那么也需要去設置這三個樣式。目的就是解決瀏覽器默認值的問題。

            第五招:針對IE6、IE7、FF的css樣式(這一招在特殊情況下經常用到)
            原來建設網站經常使用!important來設置優先權,但有了IE7之后就不行了。下面給大家個可以解決IE6、IE7、FF各個CSS優先權的方法
            #1 { color: #333; } /* FF環境 */
            * html #1 { color: #666; } /* IE6環境 */
            *+html #1 { color: #999; } /* IE7環境 */
            上面的書寫順序一定不能去改變。
            這樣子網頁在FF下顯示#333,IE6下顯示#666,IE7下顯示#999;

            熱門關鍵詞: css ie6 ie7 ie8 兼容性寫法 CSS hack
            欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片