IE CSS display: inline-block 渲染问题

Question

IE CSS display: inline-block 渲染问题

18

我在IE浏览器中遇到了一个非常烦人的渲染问题。我的代码如下：

CSS：

div {
    display: inline-block;
    margin-right:40px;
    border: 1px solid;
}

HTML：

<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>

以下是在Firefox/Chrome中预期的显示效果：

enter image description here

以下是在IE中的显示效果：

enter image description here

我通过谷歌搜索了解到，IE支持display: inline-block属性。

- AlanFoster

IE的版本？兼容模式已启用？ - Tim M.

6个回答

13

在你的HTML中添加DOCTYPE声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在我添加了这个之后，它对我有效。

注意：在jsFiddle中，DOCTYPE是自动生成的，因此它在那里运行。

编辑1： 查看此处获得更多信息。

编辑2： 您可以在此处阅读有关inline-block样式的更多信息

- Selvakumar Arumugam

1

IE7不支持默认为块级元素的display:inline-block属性，我相信这与声明的doctype无关。 - justisb

你可以使用hasLayout属性使其在IE 7中正常工作。我会在我的帖子中编辑更多信息。 - Selvakumar Arumugam

5

对我来说，添加以下代码有效：

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

转到页眉信息。

- maycza

只有在IE兼容模式下，这个才对我有效。 - iamcoming

3

有一些针对IE的CSS hack已经被证实有效，但是这些方法有很多：

hasLayout
```
hasLayout: true;
```
--- Apparently forces IE7(?) rendering to follow CSS layout rules for the element instead of global rules
*display
```
*display: inline;
zoom: 1;
```
-- The star hack, which apparently "tricks" rendering engine to line up the divs as inline elements
float
```
float:left;
```
-- Good old float, even IE6 should support it, but I don't know why you should be worried about IE6 although Chinese browser statistics seem to indicate that IE6 is still pretty popular in China, yet that could be already history as I read it some time last year. Personally, I think North Korea shouldn't be a worry, but that's just me.

然而，还有另一种避免所有这些hack的方法，就是使用谷歌在线代码项目HTML Shim或Shiv。包含它的目的是使所有IE版本在v9之前支持HTML5。我注意到它很有用，我不必使用上面提到的所有内容才能让inline-block起作用。这仅在您不介意添加一些JavaScript时才有效。另一方面，现在谁会没有JS呢？

Of course, there's also the quirks mode (compatibility) or standard modes, so take care to add a valid doctype to start with. For HTML5, it's simpler:

<?DOCTYPE html>

(?) 我不确定具体是哪个版本，但我认为在怪异模式下是读取了7。

- Shubhojoy Mitra

0

div {
    display: block;
    margin-right: 40px;
    float: left;
    border: 1px solid;
}

问题仅存在于IE7或更早版本，但这将修复它。

- Rajat Singhal

这是一个可行的解决方案，但有时您不想浮动元素。对于 inline-block 的支持使得开发 CSS 布局变得更加容易。 - Tim M.

是的，但当像IE7这样的浏览器出现时，就必须这样做... 虽然说实话，我的公司不检查ie<8。 - Rajat Singhal

-1

display: inline;

并且

zoom: 1;

运行良好

- Serkan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim M. · Accepted Answer

可行的解决方案

以下解决方案在以下模式下似乎都能正常工作：

怪异模式(Quirks mode)
IE 7标准模式(IE 7 Standards)
IE 8标准模式(IE 8 Standards)
IE 9标准模式(IE 9 Standards)
IE 9兼容性模式(IE 9 Compatibility Mode)

<!DOCTYPE html>
<html>
<head>
    <style>

    DIV {
        display: inline-block;
        *display: inline; /* leading asterisk IS correct */
        margin-right:40px;
        border: 1px solid;
        zoom: 1; /* seems to fix drawing bug on border in IE 7 */
    }

    </style>

</head>
<body>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
    <div>element</div>
</body>
</html>

答案历史

http://jsfiddle.net/3sK4S/

在IE9标准模式下工作正常。在怪异模式下无法正确显示（如您所描述）。

使用IE9进行测试：

怪异模式：块级元素（不正确）
IE 7 标准模式：块级元素（不正确）
IE 8 标准模式：行内元素（正确）
IE 9 标准模式：行内元素（正确）
IE 9 兼容性模式：行内元素（正确）

欺骗IE7的方法：

div {
    display: inline-block;
    *display: inline; /* leading asterisk IS correct */
    margin-right:40px;
    border: 1px solid;
}

这段内容引用自该篇文章。在IE 7仿真模式下对我有用。

根据@SKS评论中提到的doctype，我添加了一个指定了doctype的完整解决方案。