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

時間 2019-12-14

標籤裏面內聯元素使用 display inline 欄目 CSS 简体版

原文原文鏈接

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

*{ 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>

</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>

<div>我是div1</div>

<div>我是div2</div>

</body>

如圖：

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

去掉 inline-block的間距方法這麼幾種：
去除html之間空格：
用HTML註釋：

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

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