html – 在IE7中,浮动div扩展到100％

概述我有以下简单的布局： div.main{ width: 300px; border: 2px solid #98999E; overflow: auto;}div.main > div{ float: right; border: 2px solid #FF3700; margin: 2px;}div.inner > div{ 我有以下简单的布局：

div.main{    wIDth: 300px;    border: 2px solID #98999E;    overflow: auto;}div.main > div{    float: right;    border: 2px solID #FF3700;     margin: 2px;}div.inner > div{     float: right;}<div >    <div >        <div>123</div>        <div>456</div>    </div>    <div>999</div></div>

在Chrome和firefox中,这会按预期呈现 – 所有内容都在同一行内：

但是,在ie7中测试时(或者在兼容模式下实际上是ie8),主要的第一个div的宽度为100％,因此第二个div被推到它下面：

一个例子可以找到here.

怎么能修好？

(编辑：
事实证明,这也发生在兼容模式的IE9中)

(编辑2：似乎这种情况发生在浮点数：仅对,而不是浮点数：左)

解决方法 应用显示：内联;或显示：inline-block;内心的div.

w3.org – 9.2.2 Inline-level elements and inline boxes

总结

以上是内存溢出为你收集整理的html – 在IE7中,浮动div扩展到100％全部内容，希望文章能够帮你解决html – 在IE7中,浮动div扩展到100％所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。