Question

我很困惑为什么IE9以令人惊讶的方式解释这种基本行为。在Firefox 4或Chrome 11中，我看到div正如我所期望的那样并排出现。但是在IE9中，我看到div出现在另一个之下。

<div style='border: black solid 1px'>
   <div style='display: inline-block; width: 10em; height: 1em; background-color: red'>
      block one
   </div>
   <div style='display: inline-block; width: 10em; height: 1em; background-color: green'>
      block two
   </div>
</div>

我确信IE9符合标准，所以我缺少什么？

任何帮助将不胜感激！

更新：哇，这很奇怪。我以前没有DOCTYPE声明。我加的那一刻 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">位于页面顶部，IE9正常工作，就像Firefox和Chrome一样。有什么想法吗？

Answer 1

我唯一能想到的是IE9正在使用兼容性视图（类似于IE7的渲染引擎，如果我没有错）来渲染你的页面。如果关闭兼容性视图，您将看到这些框按预期水平堆叠。

只有IE8及更新版本才能完全支持display: inline-block。 IE7及更早版本将其应用于默认情况下内联的元素（如span），而不应用于任何其他元素（如li或div）。因此，块元素仍显示为块，而不是内联块。

更新：哇，这很奇怪。我以前没有DOCTYPE声明。我在页面顶部添加<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">的那一刻，IE9工作正常，就像Firefox和Chrome一样。有什么想法吗？

这很简单：在添加doctype声明之前，IE9正在quirks mode中呈现。在怪癖模式中，IE就像在旧版本中一样处理display: inline-block，正如我在上一段中所解释的那样。通过拥有doctype声明，IE9将以标准模式呈现，按预期呈现样式。

Answer 2

尝试以下工作......

<div style='border: black solid 1px;display:inline'>
   <div style='display: inline; width: 10em; height: 1em; background-color: red'>
      block one
   </div>
   <div style='display: inline; width: 10em; height: 1em; background-color: green'>
      block two
   </div>
</div>

Answer 3

是的，IE 9和显示有一些问题：内联块。使用兼容性lebel可以避免BoltClock解释。我的建议是使用 float：left而不是display：inline-block

 <div style='border: black solid 1px'> 
       <div style='float:left; width: 10em; height: 1em; background-color: red'> 
          block one 
       </div> 
       <div style='float:left; width: 10em; height: 1em; background-color: green'> 
          block two
       </div> 
    </div>

您可以找到有关Div side by side in one line的更多信息。

Answer 4

为了让它在没有DOCTYPE的情况下工作（添加它不在我的控制范围内）我必须使用以下css

<style type="text/css">
        #myulid li{
            display: inline-block;
            width: 100px;
            margin: 10;
            text-align:center;
            vertical-align: top;
        }
    </style>

    <!--[if IE]>
    <style type="text/css">
        /* css for IE */
        #myulid{
            display: block;
        }
        #myulid li{
            display: inline;
        }
    </style>
    <![endif]-->

内联块：Firefox 4与IE 9

4 个答案: