Странное поведение margn-top в FF

L0k! · July 24, 2009

Столкнулся с проблемой позиционирования блоков в Огнелисе 3.5.1. (в опере и ослике нормально)

Приведу код для примера:

<body>
<div style="background:#999999; width:500px; height:300px;">
<div style="background:#009966; width:100px; height:100px; position:relative; margin-top:15px;"></div>
<div style="background:#000000; width:100px; height:100px; position:relative; left:150px; margin-top:-50px;"></div>
<div style="background:#ffffff; width:100px; height:100px; position:relative; margin-left:300px;"></div>
</div>

<div style="background:#ff9999; width:500px; height:300px;">
<div style="background:#009966; width:100px; height:100px; position:relative; top:15px;"></div>
<div style="background:#000000; width:100px; height:100px; position:relative; left:150px; margin-top:-50px;"></div>
<div style="background:#ffffff; width:100px; height:100px; position:relative; margin-left:300px;"></div>
</div>
</body>

в первый раз яопускал вложеный див с помощью margin-top, и почемуто опускался не он, а родительский

во втором варианте использовался top - и уже нормально.

Объясните пожалуйста, в чем отличие top и margin-top в данной конкретной реализации, и почему firefox выдает такой косяк?

Zippovich · July 24, 2009

<body>
<div style="background:#999999; width:500px; height:300px;">
<div style="height: 1px; overflow: hidden"></div>
<div style="background:#009966; width:100px; height:100px; position:relative; margin-top:14px;"></div>
<div style="background:#000000; width:100px; height:100px; position:relative; left:150px; margin-top:-50px;"></div>
<div style="background:#ffffff; width:100px; height:100px; position:relative; margin-left:300px;"></div>
</div>

<div style="background:#ff9999; width:500px; height:300px;">
<div style="height: 1px; overflow: hidden"></div>
<div style="background:#009966; width:100px; height:100px; position:relative; top:15px;"></div>
<div style="background:#000000; width:100px; height:100px; position:relative; left:150px; margin-top:-50px;"></div>
<div style="background:#ffffff; width:100px; height:100px; position:relative; margin-left:300px;"></div>
</div>
</body>

L0k! · July 25, 2009

Ясно, спасибо.

Просто я думал, что я где-то ошибку допускаю, или некоторые свойства несовместимы... а в результате оказываеться, что без бубна ничего толком и не работает, приходиться все время что-то придумывать =(

can3p · July 25, 2009

по спецификации отступ дочернего блока накладывается на отступ родительского, в результате дочерний блок отодвинется на высоту, равную максимальной из этих двух

Sign In

Странное поведение margn-top в FF

Question

L0k!

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Zippovich

Link to comment

Share on other sites

L0k!

Link to comment

Share on other sites

can3p

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information