Странное поведение CSS ... удаление 1px границы заставляет <DIV>двигаться примерно на 20px - PullRequest
Новая
       7

Странное поведение CSS ... удаление 1px границы заставляет <DIV>двигаться примерно на 20px

5 голосов
/ 28 мая 2010

У меня есть следующее:

CSS 

#pageBody
{
    height: 500px;
    padding:0;
    margin:0;
    /*border: 1px solid #00ff00;*/
}

#pageContent
{
    height:460px;
    margin-left:35px;
    margin-right:35px;
    margin-top:30px;
    margin-bottom:30px;
    padding:0px 0 0 0;
}

HTML 

    <div id="pageBody"> 
    <div id="pageContent"> 
        <p> 
        blah blah blah
        </p> 
    </div> 
    </div>

Если я раскомментирую пограничную линию в pageBody, все будет хорошо, как надо ... У меня была граница, чтобы убедиться, что все в порядке. Но, удаляя границу, pageBody опускает страницу примерно на 20 пикселей, в то время как pageContent, кажется, не перемещается вообще.

Теперь это не настоящая страница, а подмножество. Если ничего не очевидно, я могу попытаться сгенерировать минимальную рабочую выборку, но я подумал, что сначала может быть простой быстрый ответ.

Я вижу ту же самую проблему в Chrome и IE8, предполагая, что это я, а не браузер. Любые советы, где искать? Я задавался вопросом, может быть, граница в 1px была какой-то переломной точкой, из-за чего содержимое элемента div было слишком большим, но изменение высоты #pageContent, например, на 400, не имеет значения, за исключением подрезания нижней части этого div.

Ответы [ 3 ]

5 голосов
/ 28 мая 2010

Очевидно, что когда вы добавляете границу или поле к pageBody, верх pageContent вычисляется как pageBody.border + pageBody.margin + pageContent.margin-top. В противном случае он, кажется, игнорирует pageContent.margin-top.

Это типичный случай разрушения полей

3 голосов
/ 28 мая 2010

Поля рушатся.
(Доступно с #pageBody красным фоном и #pageContent синим фоном.)

То есть: поскольку оба являются блочными элементами, а поля соприкасаются, они сжимаются вместе, а больший остается в силе. Если между полями есть границы или отступы, они не соприкасаются и, следовательно, не разрушаются.

Ожидаемое поведение: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

1 голос
/ 28 мая 2010

Попробуйте установить position: relative; для вашего div'а ... У меня уже было решение подобных проблем раньше.

...