inline-block：Firefox 4 vs IE 9

我很困惑，为什么IE9以惊人的方式解释了这样一个基本的行为。在Firefox 4或Chrome 11中，我发现divs并不像我所期望的那样并排显示。不过在IE9中，我看到了divs出现在另一个之下。inline-block：Firefox 4 vs IE 9

<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一样。任何想法是什么？

来源

2011-03-30 Alexandre

有多宽的集装箱'div'？ – alex 2011-03-30 06:38:26

可能你有检查这个http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie – sandeep 2011-03-30 07:01:07

对于这个例子，只要顶部div大于20em，你可以看到这个奇怪的不一致。 – Alexandre 2011-03-30 07:17:21

我能想到的唯一的事情就是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将在标准模式下呈现，并按照预期呈现您的样式。

来源

2011-03-30 07:45:19 BoltClock

尝试以下操作它的工作原理...

<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>

来源

2011-03-30 06:41:25 Jitesh

谢谢你的帮助。尽管我的问题更多地与内联块有关。我不明白为什么IE9会选择将内部div放在另一个之下。我认为*内嵌*块的核心效果是这些块将被放置在另一个旁边而没有换行。 – Alexandre 2011-03-30 07:20:54

是的，IE 9和显示器有一些问题：inline-block。如BoltClock所解释的，可以通过Compatibility lebel来避免。我的建议是使用浮动：左，而不是显示：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。

来源

2012-10-17 13:56:27 Markweb

得到它的工作没有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]-->

来源

2013-04-26 23:02:54 sreek

inline-block：Firefox 4 vs IE 9

回答

相关问题