在IE 6 裏面內聯元素 使用display :inline

  • 你們知道在 IE6中 是不支持 display:inline-block的屬性的;那咱們來看下IE6中 塊元素和內斂元素顯示的效果和解決兼容的方法:css

      

<style type="text/css">html

    *{ padding: 0; margin:0;}瀏覽器

    body{ font-size: 14px; color: blue; font-weight: bold;  }spa

    div{  display: inline-block; width: 200px; height: 100px; background: #ddd}orm

    a{display: inline-block;width: 200px; height: 200px; background: red}htm

</style>it

  • html以下:  //用div表明塊元素 a表明內聯元素 在只設置了display:inline-block下方法

<body>im

    <div>我是div1</div>layout

    <div>我是div2</div>

    <a href="#">我是a1</a>

    <a href="#">我是a2</a>

</body>

如圖:

咱們發現 div 能夠設置 寬 高,可是不能像 內聯元素那樣 呈遞先後挨在一塊兒 而是獨佔一行。

a 能夠設置寬高,沒有獨佔一行,呈現內聯呈遞(表象)。

  • html 結構不改變 div追加zoom:1; _display:inline;屬性

    div{   display: inline-block; zoom:1; _display:inline; width: 200px; height: 100px; background: #ddd}

      a{ display: inline-block; width: 200px; height: 200px; background: red}

變化如圖:

      

咱們能夠看到 div 具備了 inline-block 的內聯呈遞; _zoom:1 觸發了 IE瀏覽器的layout,而後同時設置了 display: inline ,他的行爲和標準中的 inline-block 相似!

  • 此時 css 不變,咱們調一下html結構:

        <body>

            <a href="#">我是a1</a>

            <a href="#">我是a2</a>

            <div>我是div1</div>

            <div>我是div2</div>

        </body>

如圖:

    

咱們發現   內斂元素的 右側 有個間距!!! 前面幾個圖中 a 右側就有間距,咱們調了下 結構 這樣 更能表現出倆個a 標籤的 右側 都有 間距 。在標準瀏覽器下 也有的!

 

  • 去掉 inline-block的間距 方法 這麼幾種:

    去除html之間空格:

    用HTML註釋:

               

    全掉閉合標籤:設置包含元素 屬性font-size:0:  //內聯元素 ie6 7下會有1px的小縫隙

                    還有許多方法解決 間距問題這裏就不一一介紹了!!!!!

相關文章
相關標籤/搜索