亚洲综合小说另类图片

<dfn id="4z7un"><s id="4z7un"></s></dfn>
          1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
            <th id="4z7un"></th>

          2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>
            八周年活動月
            歡迎訪問長沙友點軟件科技有限公司旗下產品友點CMS官方網站!
            友點CMS

            IE6常見Bug2:雙邊距問題

            來源:友點CMS 日期:2015-09-08 12:47:31 屬于:瀏覽器兼容專題
            先看以下代碼:

            在IE6顯示效果如下:
             
            在火狐顯示效果如下:
            可以看到,在IE6中顯示的紅色區域的左邊距實際為40px,是CSS代碼中設置的20px的兩倍,這是IE6的雙邊距BUG。當滿足下面這三個條件時,就會出現這個BUG:
            1、要為塊狀元素;
            2、要左側浮動;
            3、要有左外邊距(margin-left)。
            解決這個BUG,只需在相應的塊狀元素的CSS屬性中加入“display:inline;”。

            出現雙邊距的條件是當浮動元素的浮動方向和margin的方向一致時才會出現。也就是說,并不是只有塊狀元素左浮動,且具有左外邊距時才有這個BUG,當一個盒子右浮動的同時有一個向右的margin-right的時候,IE6也會把margin-right解析為原來的2倍。當有多個同行元素都浮動了,而且都有同方向的margin,只有最靠近浮動方向的元素才會有雙邊距bug。
            解決這個bug有兩個方法:
            1、給float的元素添加一個display:inline
            2、給ie6寫一個hack,其值是正常值的一半,即_margin-right:10px;這個方法不推薦,因為要加hack寫法,而這個是要盡量避免寫的。但是這個正好能夠說明這個bug的真實存在。

            將display設置為inline后,就改變了BUG產生的條件之一(即必須是塊狀元素)。
            但是熟悉規則的人知道:浮動元素自動設置為”block”元素,而不管他們之前是什么。這說明浮動元素上的{display: inline;}會被忽略,事實上所有的瀏覽器沒有呈現任何改變,包括IE。但是,在IE6中阻止了浮動元素的邊界翻倍。