Почему Safari 4 / mac не отображает верхние и нижние поля в этом вложенном div? - PullRequest
Новая
       32

Почему Safari 4 / mac не отображает верхние и нижние поля в этом вложенном div?

4 голосов
/ 13 октября 2010

Safari 4, кажется, игнорирует поля элементов, если я не добавляю границу.

В следующем примере отображаются поля слева и справа, но нет верха или низа.

При добавлении границы он визуализируеткак и ожидалось.Я делаю что-то не так или мне нужно добавить границы (albeit transparent ones) к каждому элементу с полями только для Safari? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style>
    body {background-color:#666;}
    div {display:block; position:relative; margin:0; padding:0;}
    .background {background-color:#990000;}
    .foreground {background-color:#fff; margin:10px; padding:10px;}
</style>
</head>
<body>
    <div class='background'>
        <div class='foreground'>
        foreground
        </div>
    </div>
</body>
</html>

Ответы [ 2 ]

8 голосов
/ 13 октября 2010

Это нормальное странное поведение, вызывающее разницу (отредактировано, извините, я француз).Чтобы просто избежать этого, добавьте overflow:auto; на контейнер. 

.background {background-color:#990000; overflow:auto;}
1 голос
/ 13 октября 2010

Это называется коллапс маржи. Когда верхнее и нижнее поле соприкасаются друг с другом, поля объединяются в большее из двух значений.

Причина, по которой он работает "правильно", когда вы добавляете границу, заключается в том, что вы создали разделитель в 1 пиксель для полей, чтобы они больше не сворачивались. Интересно, что если вы вместо этого добавите пустой div без высоты / границ, поля все равно будут сжиматься, потому что div занимает пространство 0px.

...