встроенные элементы и проблемы рендеринга пробелов - PullRequest
Новая
       10

встроенные элементы и проблемы рендеринга пробелов

3 голосов
/ 14 января 2010

Давным-давно нам приходилось иметь дело с браузерами, добавляющими пробел между элементами, если в исходной разметке у нас также был пробел.

Я думал, что эта проблема почти исчезла, но сегодня я сталкиваюсь с ситуацией, когда проблема все еще существует. Странно то, что проблема не ограничивается конкретным браузером. В Firefox, Safari, Chrome и Opera он обнаруживает те же проблемы, но и в IE немного отличается.

Пример CSS: 

<style type="text/css">
li {
    display: inline;
    background: pink;
    margin: 0px;
    padding: 10px 0px;
}

li a {
    background: green;
    margin: 0px;
    padding: 0px;
}

</style>

Пример разметки: 

<ul>
<li>
    <a href="#">hello</a>
</li>
<li>
    <a href="#">world</a>
</li>
</ul>

<ul>
<li><a href="#">hello</a></li>
<li><a href="#">world</a></li>
</ul>

<ul>
<li><a href="#">hello</a></li><li><a href="#">world</a></li>
</ul>

Только тот последний UL отображается так, как я хотел бы, чтобы его теги A охватывали всю ширину тега LI контейнера.

Учитывая согласованность между браузерами, возможно, это на самом деле рендеринг, как и должно быть? Если не считать возврата к старым хакерским комментариям (начиная с комментария в конце одной строки и переходя к началу следующей), кто-нибудь знает обходной путь для этого или почему он делает то, что делает?

В идеале, вместо этого я бы использовал свои LI, но из-за некоторых других проблем предпочтение было бы иметь встроенное.

Ответы [ 3 ]

4 голосов
/ 15 января 2010

Да, пробел - это пробел, когда дело доходит до встроенных элементов. Это почти всегда именно то, что вы хотите. Взять, к примеру, следующее: 

<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>

Сосет довольно сильно, если это будет выглядеть как:

Я * действительно *** очень ** очень хочу этот пробел.

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

1 голос
/ 11 февраля 2014

Вы можете просто установить размер шрифта контейнера на 0, например, поместить его в div, а затем установить размер шрифта propper в пункте LI

1 голос
/ 15 января 2010

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

...