IE显示内嵌块

所以我在做，像这样IE显示内嵌块

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />were 
    </div> 
</div>

现在，在Firefox和Chrome它显示得很好，但在Internet Explorer 8中事实并非如此。他们有布局，所以不是问题，并且宽度足够小，因此它适合于一条线。

如果我使用范围的，而不是它的工作，但是我真的很想konw为什么div的不”工作在IE

来源

2011-07-15 csteifel

您的文件是否有文档类型声明？ – BoltClock

你是什么意思“它不起作用？”你期望的效果是什么？ – Kyle

Ahhh ok我的HTML 4已经声明，因为它是一个非常老的页面，而不是XHTML或HTML5 – csteifel

IE的旧版本不了解inline-block块级元素。

inline-block适用于内联元素的原因是因为他们这样做，因此它触发了hasLayout。并且内嵌元素的布局工作原理如下，如inline-block。

因此，要使inline-block与块级元素一起工作，请使它们内联并以某种方式触发hasLayout，例如使用zoom: 1。

因此，对于您的代码，有两种方法：将div s更改为span s，或添加内联hacks（或将代码移至外部样式表并使用条件注释）。内联黑客的版本是这样的：

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />were 
    </div> 
</div>

来源

2011-10-01 21:08:37 kizu

Win XP下的IE8无法使用CSS hack。 – Piero

IE < 8不能切换，默认情况下，以inline-block元素block元素。无论您尝试多么努力，除非您使用float IIRC，否则他们将始终保持block。

在你的例子中，似乎你不需要使用<div>。如果是这种情况，为什么不使用<span>或默认为inline的元素。否则，floating就是答案。

来源

2011-07-15 10:29:06 Mig

这是不正确的。 IE8理解_inline-block_显示模式就好了。但IE7完全不知道这种模式。尽管可以通过将显示设置为_inline_并强制该元素的布局（例如_zoom_属性）来模拟_inline-block_行为。 – oddy

就这样。 IE8似乎可以与'inline-block'正常工作，我会更新我的答案。 – Mig

IE8与内联块一起工作良好，直到您开始在内联块内隐藏/显示会导致父容器增大或缩小的元素为止。 – ScubaSteve

试试这个

<style type="text/css"> 
.one { 
    width: 200px; 
    border: 1px solid black; 
} 
.two { 
    display: -moz-inline-box; 
    display: inline-block; 
    width: 70px; 
    border: 1px solid green; 
} 
* html .two { 
    display: inline; 
} 
* + html .two { 
    display: inline; 
} 
</style> 
<div class="one"> 
    <div class="two"> 
    asdfasdf<br />asdf 
    </div> 
    <div class="two"> 
    asdfasdf<br />were 
    </div> 
</div>

来源

2011-09-28 15:54:47 HerrSerker

更改文档类型工作了IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

来源

2013-09-18 15:15:15 user2792101

display: inline-block; *zoom: 1; *display: inline;

您可以添加inline-block的其他浏览器，但IE浏览器，你可以用*添加样式。它只适用于即

来源

2014-02-15 15:55:31 GeniusJRS

回答

相关问题