奇怪的Firefox溢出/浮动行为 [英] Weird Firefox overflow/float behavior

问题描述

我有一个简单的布局，在Chrome中可以正常工作， Safari甚至Opera也是如此（OS X）。我在这里的惊喜是Firefox。 （IE和Win尚未测试）。

问题是 fieldset.ownerbox 在Firefox中没有浮动。 （饼图下面的两个半透明字段集）

这里应用了CSS规则：

  #owners {
 position：relative; 
 width：940px; 
 left：0px; 
 margin-left：0px; 
 z-index：1; 
 top：-240px; 
 font-size：16px; 
} 
 .ownerbox {
 width：310px; 
 height：150px; 
 padding：10px; 
 margin-right：20px; 
 float：left; 
背景：rgba（255,255,255,0.5）; 
颜色：＃000; 
 border-radius：10px; 
 -webkit-border-radius：10px; 
 -moz-border-radius：10px; 
} 
 .ownerbox.large {
 width：500px; 
 padding：0px 10px 20px 10px; 
} 
  

请帮忙，我的方法出了什么问题？

解决方案

重新调整宽度，以便将填充考虑在内。您可以在 #owners 上 overflow-x：hidden; 来查看包含的外观。

或者调整#owners的宽度。

编辑：看起来您只需要清除：在 #owners 上。

I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).

The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)

CSS rules applied here:

#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}

Please help, what's wrong with my approach?

解决方案

Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".

Alternatively adjust the width on #owners.

Edit: Seems you just need to clear:both on #owners.

这篇关于奇怪的Firefox溢出/浮动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！