Маржинальное поведение «переполнения: скрытый» div после добавления div в webkit - PullRequest
Новая
       1

Маржинальное поведение «переполнения: скрытый» div после добавления div в webkit

2 голосов
/ 28 февраля 2012

Я обнаружил, что div «overflow: hidden» после div «float: left» имеет удвоенное поле справа. Это можно проверить с помощью следующего кода: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.intro {
    border: 1px solid #DBDBDB;
    margin: 10px 0;
    padding: 10px 0;
}

div.intro>div {
    border: 1px solid #DBDBDB;
    height: 150px;
    margin: 0 10px;
}

div.brief {
    float: left;
    width: 150px;
}

div.list {
    overflow: hidden;
}
</style>
</head>
<body>
<div class="intro">
    <div class="brief"></div>
    <div class="list"></div>
</div>
</body>
</html>

Расстояние между правой границей div.list и правой границей div.intro составляет 20 пикселей в chrome (17.0.963.56 м) и safari (5.1.2), а в Firefox (11.0) и IE9 - 10px.

Это ошибка веб-набора или просто неопределенное предпочтение css?

Спасибо!

Ответы [ 2 ]

1 голос
/ 29 февраля 2012

Мне удалось воспроизвести это на Chrome для Mac, 17.0.963.56.

Проблема связана с тем, что вы дали #brief и #list высоту, но не содержалиплавать.Там на самом деле нет двойной маржи;margin-right из 10px объединяется с .intro 10px padding-right, чтобы дать намек на 20px с двойным полем.

С учетом всех обстоятельств, факт WebKit (Chrome &Средство рендеринга Safari), визуализирующее вещи таким образом, немного странно.

С этим CSS все работало, как и ожидалось ( см. Fiddle ): 

.intro {
    margin: 0 0 20px;
    padding: 20px;
    background: #FFA;
    overflow: auto;
    height: 100%;
}
.brief {
    background: rgba(255, 0, 0, 0.25);
    width: 150px;
    float: left;
}
.list {
    background: rgba(0, 0, 255, 0.25);
    margin: 0 0 0 170px;
}
0 голосов
/ 29 февраля 2012

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

Если, однако, вы работаете с плавающим тегом div с динамической шириной, вы можете нацелить на проблему, связанную с Webkit, свойством -webkit-margin-start, которое все другие браузеры будут игнорировать:

.div.list {
    overflow: hidden;
    -webkit-margin-start: 0px !important; /* you can ditch the 'important' by adding 'div.intro' to the front of your selector */
}

Это эффективно устанавливает div.list margin-left: 0 только в Webkit, в то же время обеспечивая динамическую ширину для вашего плавающего div.К сожалению, я еще не смог протестировать это в Chrome 19b, поэтому я не уверен, как он справится с этим клуджем.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...