Html IE CSS 显示：内联块渲染问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8692021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE CSS display: inline-block Rendering issue
提问by AlanFoster
I'm having an annoying rendering issue with IE my code is
我有一个烦人的 IE 渲染问题，我的代码是
CSS :
CSS :
div {
display: inline-block;
margin-right:40px;
border: 1px solid;
}
HTML :
HTML :
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
<div>element</div>
This is how it looks in firefox/chrome (the expected display)
这是它在 firefox/chrome 中的样子（预期显示）
This is how it looks in IE
这是它在 IE 中的样子
I googled if IE supports display: inline-block, and apparently it does.
我用谷歌搜索 IE 是否支持 display: inline-block，显然它确实支持。
采纳答案by Selvakumar Arumugam
Add DOCTYPE to your html,
将 DOCTYPE 添加到您的 html，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
It works for me after I added this.
添加此内容后，它对我有用。
Note: in jsFiddle, DOCTYPE was automatically generated so it will work there.
注意：在 jsFiddle 中，DOCTYPE 是自动生成的，因此它可以在那里工作。
Edit 1:Check thisfor more information,
编辑 1：检查这个以获取更多信息，
Edit 2:You can read more about inline-block styling here
编辑 2：您可以在此处阅读有关内联块样式的更多信息
回答by Tim Medora
Working Solution
工作解决方案
The following appears to work correctly in:
以下似乎在以下情况下正常工作：
- Quirks mode
- IE 7 Standards
- IE 8 Standards
- IE 9 Standards
- IE 9 Compatibility Mode
- 怪癖模式
- 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>
Answer History
回答历史
Works fine for me in IE9 Standards Mode. Does not display correctly (as you described) in quirks mode.
在 IE9 标准模式下对我来说很好用。在怪癖模式下无法正确显示（如您所述）。
Testing with IE9:
用IE9测试：
- Quirks mode: block (incorrect)
- IE 7 Standards: block (incorrect)
- IE 8 Standards: inline (correct)
- IE 9 Standards: inline (correct)
- IE 9 Compatibility Mode: inline (correct)
- 怪癖模式：阻止（不正确）
- IE 7 标准：阻止（不正确）
- IE 8 标准：内联（正确）
- IE 9 标准：内联（正确）
- IE 9 兼容模式：内联（正确）
To trick IE7:
欺骗IE7：
div {
display: inline-block;
*display: inline; /* leading asterisk IS correct */
margin-right:40px;
border: 1px solid;
}
Taken from this article. Works for me in IE 7 emulation mode.
取自这篇文章。在 IE 7 仿真模式下对我有用。
Per @SKS comment about doctype, I have added a complete solution with a doctype specified.
根据@SKS 关于 doctype 的评论，我添加了一个指定了 doctype 的完整解决方案。
回答by maycza
For me worked adding this code:
对我来说，添加了这个代码：
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
to header information.
到标题信息。
回答by Shubhojoy Mitra
There are CSS hacks for IE that does work, but there's quite a few of them:
有一些适用于 IE 的 CSS hacks 确实有效，但其中有很多：
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.
有布局
hasLayout: true;--- 显然强制 IE7(?) 渲染遵循元素的 CSS 布局规则而不是全局规则
*显示
*display: inline; zoom: 1;-- Star hack，显然是“欺骗”渲染引擎将 div 排列为内联元素
漂浮
float:left;-- 好老的浮动，即使 IE6 也应该支持它，但我不知道你为什么要担心 IE6 虽然china浏览器的统计数据似乎表明 IE6 在china仍然很受欢迎，但这可能已经成为我读到的历史去年的某个时候。就我个人而言，我认为朝鲜不应该担心，但这只是我。
However, there seems another way to avoid all those hacks in favour of a google online code project called HTML Shim, or Shiv. The purpose of including it is to make all IE versions before v9 to support HTML5. I noticed that it helps and I don't have to use all of the above to get inline-block to work. This is only valid if you don't mind adding some JavaScript. On the other hand, who does without JS these days?
然而，似乎有另一种方法可以避免所有这些黑客行为，而支持名为 HTML Shim 或 Shiv 的 google 在线代码项目。包含它的目的是让v9之前的所有IE版本都支持HTML5。我注意到它有帮助，而且我不必使用上述所有内容来使内联块工作。这仅在您不介意添加一些 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:
当然，还有 quirks 模式（兼容性）或标准模式，因此请注意添加有效的 doctype 开始。对于 HTML5，它更简单：
<?DOCTYPE html>(?) Not sure about which version, but I think I read 7 in quirks mode.
(?)不确定是哪个版本，但我想我在 quirks 模式下阅读了 7。
回答by Rajat Singhal
div {
display: block;
margin-right: 40px;
float: left;
border: 1px solid;
}
The problem is only with IE7 or earlier, but this will fix that.
问题仅在于 IE7 或更早版本，但这将解决该问题。
回答by Serkan
display: inline;
and
和
zoom: 1;
worked fine
工作正常
