在IE 6 里面内联元素使用display :inline

时间 2019-12-14

标签里面内联元素使用 display inline 栏目 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

<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 相似！

<body>

<div>我是div1</div>

<div>我是div2</div>

</body>

如图：

咱们发现内敛元素的右侧有个间距！！！前面几个图中 a 右侧就有间距，咱们调了下结构这样更能表现出俩个a 标签的右侧都有间距。在标准浏览器下也有的！

去掉 inline-block的间距方法这么几种：
去除html之间空格：
用HTML注释：

全掉闭合标签：设置包含元素属性font-size:0： //内联元素 ie6 7下会有1px的小缝隙

还有许多方法解决间距问题这里就不一一介绍了！！！！！

在IE 6 里面内联元素 使用display :inline