Невозможно свернуть <br>в webkit?

Question

Как показано в этом jsfiddle: http://jsfiddle.net/qrbhb/

Если вы возьмете эту разметку:

<div>There should be no gap between us</div>
<br />
<div>There should be no gap between us</div>

и этот CSS:

div {
    background: #999;
}

br {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

Все браузеры на основе webkitбудет отображать пробел, равный высоте строки родительского элемента, в то время как Firefox и IE не будут отображать пробел.Я не знаю, кто здесь следит за спецификацией, но я не могу заставить себя так показывать во всех браузерах, и это сводит меня с ума.Есть идеи?

РЕДАКТИРОВАТЬ: Извините, ребята, я смотрел на довольно сложный макет и по ошибке думал, что некоторые элементы были плавающими, которые не были.Плавающие элементы ведут себя как ожидалось.

Answer 1

Одд.Я вижу некоторую логику в том, что происходит.Кажется, в качестве высоты используется line-height от предыдущего элемента.Если вы добавите это, например, непосредственно перед <br />, как показано:

<div class="weird" /><br />

... и затем установите его высоту строки:

div.weird {
    line-height: 0;
}

(jsFiddle здесь )

... тогда <br /> теряет свою высоту.

Итак, я бы предположил, что перенос строки "наследует" - хотя это скореенеправильное слово - высота предыдущего бита текста.Я не уверен, что это действительно так, но в этом есть смысл объяснений, которые я могу придумать.

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

Answer 2

использование display:none;

http://jsfiddle.net/qrbhb/13/