IE CSS 显示：inline-block 渲染问题答案

【问题标题】：IE CSS display: inline-block Rendering issueIE CSS 显示：inline-block 渲染问题
【发布时间】：2012-01-31 07:08:35
【问题描述】：

我遇到了一个恼人的 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 中的外观（预期显示）

这是它在 IE 中的样子

我搜索了 IE 是否支持 display: inline-block，显然它支持。

【问题讨论】：

IE 版本？是否启用兼容模式？

标签： html css internet-explorer rendering

【解决方案1】：

工作解决方案

以下似乎可以正常工作：

怪癖模式
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 测试：

怪癖模式：阻止（不正确）
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。

【讨论】：

这是一件有趣的事情。我没有意识到它默认为怪癖模式......这很烦人。有没有办法让它在怪癖模式下工作？
@AlanFoster - 我发布的 IE7 hack 似乎也解决了这个问题：jsfiddle.net/3sK4S/1
@AlanFoster 您可以在标题中使用<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 元数据，以使 IE 使用可用的最高渲染引擎运行，而不是诉诸兼容模式等。尽管 IE7 仍然以您的方式运行现在看到了，所以你可能仍然希望有这个 hack。

【解决方案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

【讨论】：

IE7 不支持 display: inline-block 默认为块级的元素，我很确定不管声明的文档类型如何？
您可以使用 hasLayout 属性使其在 IE 7 中工作。我将使用更多信息编辑我的帖子。

【解决方案3】：

对我来说，添加此代码：

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

到标题信息。

【讨论】：

只有在 IE 兼容模式下才对我有用。

【解决方案4】：

有一些适用于 IE 的 CSS hack 确实有效，但其中有不少：

有布局
```
hasLayout: true;
```
--- 显然强制 IE7(?) 渲染遵循元素的 CSS 布局规则而不是全局规则
*显示
```
*display: inline;
zoom: 1;
```
-- 明星 hack，显然是“欺骗”渲染引擎将 div 排列为内联元素
浮动
```
float:left;
```
-- 好老的float，连IE6都应该支持，但我不知道你为什么要担心IE6，虽然中国浏览器的统计数据似乎表明IE6在中国仍然很流行，但这可能已经成为历史去年我读过它。就我个人而言，我认为朝鲜不应该担心，但那只是我自己。

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

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

&lt;?DOCTYPE html&gt;

(?) 不确定是哪个版本，但我想我在怪癖模式下阅读了 7。

【讨论】：

【解决方案5】：

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

问题只出在 IE7 或更早版本上，但这会解决这个问题。

【讨论】：

这是一个合法的解决方案，但有时您不想浮动元素。对inline-block 的支持使开发 CSS 布局变得更加容易。
是的..但是当像 IE7 这样的浏览器出现时，必须做这样的事情......虽然老实说我的公司不检查 ie

【解决方案6】：

display: inline;

和

zoom: 1;

工作正常

【讨论】：