2010-07-13 4 views
3

У меня есть simple layout, который отлично работает в Chrome, Safari даже Opera тоже (OS X). Для меня неожиданностью является Firefox. (IE и Win еще не протестированы).Weird Firefox overflow/float поведение

Проблема fieldset.ownerbox не плавает в Firefox. (Два полупрозрачный FIELDSET ниже круговой диаграммы) правила

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, чтобы увидеть, как он выглядит «содержащимся».

Альтернативно отрегулируйте ширину на # хозяевах.

Редактировать: Вам кажется, что вам нужно только clear:both по телефону #owners.

+0

Когда я устанавливаю переполнение: auto; на #owners Firefox правильно отображает макет, за исключением того, что клип-диаграмма сверху и снизу. – fabrik

+0

Перемещенный список выше #owners сделал это ?? Спасибо! – fabrik

+0

Вы не должны использовать 'top: -240px' и' position: relative', как есть. Я думаю, вам нужно настроить макет, чтобы не полагаться на относительное позиционирование. Если у вас много таких дел, это плохой знак, и обычно это означает вернуться назад, убить родственников и найти другой способ компоновки. –