2010-07-13 92 views
3

我有一個simple layout,它在Chrome,Safari甚至Opera(OS X)中都能正常工作。我在這裏的驚喜是Firefox。 (IE和Win尚未測試)。奇怪的Firefox溢出/浮動行爲

問題是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; 
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; 
} 

請幫幫忙,有什麼錯我的做法?

回答

2

重新調整寬度,以便將填充考慮在內。你可以overflow-x:hidden;#owners看看它是如何看起來「包含」。

或者調整#owners的寬度。

編輯:似乎你只需要clear:both#owners

+0

當我設置溢出:自動;在#owners上Firefox除了頂部和底部的餅圖剪輯之外正確地呈現佈局。 – fabrik 2010-07-13 14:30:50

+0

上面的浮動列表#owners做了這個??謝謝! – fabrik 2010-07-13 14:33:06

+0

你不應該使用'top:-240px'和'position:relative'。我認爲你需要調整你的佈局,不要太依賴相對定位。如果你有很多這樣的情況,這是一個不好的跡象,通常意味着回去,殺死位置親屬,並找到另一種佈局方式。 – 2010-07-13 14:33:30