Question

我的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支持显示，我用google搜索：inline-block，显然确实如此。

Answer 1

工作解决方案

以下似乎可以正常使用：

Quirks模式
IE 7标准
IE 8标准
IE 9标准
IE 9兼容模式

<!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进行测试：

Quirks模式：阻止（不正确）
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;
}

取自this article。在IE 7仿真模式下适用于我。

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

Answer 2

将DOCTYPE添加到您的html，

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

在我添加之后，它对我有用。

注意：在jsFiddle中，DOCTYPE是自动生成的，因此它可以在那里工作。

编辑1： 查看this了解详情，

编辑2： 您可以阅读有关内联块样式here

的更多信息

Answer 3

我工作时添加了这段代码：

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

标题信息。

Answer 4

有IE的CSS黑客可以正常工作，但其中有不少：

<强> hasLayout的
```
hasLayout: true;
```
---显然迫使IE7（？）渲染遵循元素的CSS布局规则而不是全局规则
*的显示

*display: inline; zoom: 1;

- 明星黑客，显然“欺骗”渲染引擎将div作为内联元素排列

<强>浮

float:left;

- 好老浮，即使IE6应该支持它，但我不知道为什么你应该担心IE6虽然中国的浏览器统计数据似乎表明IE6在中国仍然很受欢迎，但这可能已经是历史了正如我去年读到的那样。就个人而言，我认为朝鲜不应该担心，但那只是我。

然而，似乎有另一种方法可以避免所有那些黑客转而支持名为HTML Shim或Shiv的谷歌在线代码项目。包含它的目的是使v9之前的所有IE版本都支持HTML5。我注意到它有帮助，我不必使用上述所有内容来使内联块工作。这仅在您不介意添加一些JavaScript时才有效。另一方面，这些天谁没有JS呢？

当然，还有怪癖模式（兼容性）或标准模式，因此请注意添加有效的doctype以开始。对于HTML5，它更简单：

<?DOCTYPE html>

（？）不确定哪个版本，但我认为我在怪癖模式下阅读了7个。

Answer 5

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

问题仅出在IE7或更早版本，但这将解决这个问题。

Answer 6

display: inline;

和

zoom: 1;

工作正常

IE CSS显示：内联块渲染问题

6 个答案: