Разница <span></span> против <span /> для CSS? - PullRequest
Новая
       2

Разница <span></span> против <span /> для CSS?

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

Все еще пытаюсь заставить управление навигацией нового сайта работать так, как я хочу.

Я упростил свою проблему до этого фрагмента кода: 

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style>
        span { display: inline-block; height: 50px; vertical-align: top; background-color: Yellow; } 
        span.block { background-color: Red; width: 15px; }
    </style> 
</head> 
<body>
    <span class="block"></span><span>A B C D</span>
    <span class="block"></span><span>E F G H</span>
</body> 
</html>

Этот код отображает:

enter image description here

Однако промежутки генерируются из XSLT в Umbraco.Даже если источник заявляет , он генерирует так: 

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

Этот код отображает:

enter image description here

Почему он это делает?

В чем разница между и ?

PS: На самом деле XSLT визуализирует ul с элементами меню.Промежуток блока существует для целей макета (фоновое изображение);вот почему у него есть размеры, но нет содержания.

Ответы [ 2 ]

8 голосов
/ 08 февраля 2012

Самозакрывающиеся теги span не существуют в HTML, браузер интерпретирует его как недопустимый HTML и угадает, что вы имели в виду.

В этом случае, вероятно, рассматривается следующее: 

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

as: 

<span class="block"><span>A B C D</span>
<span class="block"><span>E F G H</span></span></span>

Чтобы подтвердить это, щелкните правой кнопкой мыши на своей тестовой странице, затем выберите Inspect Element для использования веб-инструментов или Firebug , если он установлен.Инспектор покажет вам дерево HTML в том виде, в каком его интерпретировал браузер.

0 голосов
/ 08 февраля 2012

Я не могу понять, почему вы должны использовать блок <span> для макета?Почему бы просто не добавить класс к <span> (или, возможно, более уместно <div>) и применить отступы слева и фоновое изображение? 

.my-class {
    padding-left: 15px;
    background: url(images/my-image.png) no-repeat 0 50%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...