为什么嵌入式块元素不能在Internet Explorer 8中正确显示? [英] Why are inline-block elements not displayed correctly in Internet Explorer 8?

问题描述

我有以下代码:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;'>
    asdfasdf<br />were
  </div>
</div>

在Firefox和Chrome中显示正常，但在Internet Explorer 8中则显示不正确.它们具有布局，所以这不是问题，并且宽度足够小以至于只能放在一行上.

This displays just fine in Firefox and Chrome, but in Internet Explorer 8, it does not. They have layout, so that isn't the problem, and the widths are small enough that it fits on one line.

如果我改用<span> s，它确实可以工作；但是，我真的很想知道为什么<div>在IE中不起作用.

If I use <span>s instead, it does work; however, I would really like to know why <div>s don't work in IE.

推荐答案

旧版本的IE无法理解inline-block块级元素.

The old versions of IE don't understand the inline-block for block-level elements.

inline-block对内联元素起作用的原因是因为它们做到了，因此会触发hasLayout.内联元素的has布局完全就像inline-block一样.

The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.

因此，要使inline-block与块级元素一起使用，请将它们内联并以某种方式触发hasLayout，就像使用zoom: 1一样.

So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.

因此，对于您的代码，有两种方法:将div s更改为span s，或添加内联hack(或将代码移至外部样式表并使用条件注释).具有内联黑客的版本如下所示:

So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would look like this:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>

这篇关于为什么嵌入式块元素不能在Internet Explorer 8中正确显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！