<pre> тег, позволяющий браузерам закрывать абзацы - PullRequest
6 голосов
/ 18 августа 2010

У меня проблема с HTML ниже:

<code><html>
  <body>
    <p style="font-size: large"> 
        Some paragraph text 
        <span><pre style="display:inline">some span text
дополнительный текст абзаца, который продолжается ...

Итакэто просто абзац, который содержит некоторый предварительно отформатированный текст посередине.У меня проблема в том, что и Opera, и Chrome не отображают это так, как я ожидаю.В частности, они закрывают тег абзаца перед интервалом и вводят новую строку.WTH?!

Использование параметров проверки HTML для chromes показывает, что тег <p> закрывается и вместо <pre> вставляется пустой <span></span>.Если интервал удален, Chrome все еще закрывает тег <p>, вызывая новую строку.

Мне нужно отобразить следующую структуру тегов без принудительного перевода строк <p><span><pre><code>

.Это вообще возможно или есть другой вариант или обходной путь?

РЕДАКТИРОВАТЬ: я заблокирован с тегом <pre>, поскольку он является частью плагина подсветки синтаксиса для WordPress.

ПРИМЕЧАНИЕ. Я думаю, что лучший совет здесь - проверить ваш HTML.Многие проблемы у меня были из-за некорректного HTML, который корректно обрабатывался некоторыми браузерами, а не грациозно другими.Валидация означает, что у вас есть чистый лист для работы.

Ответы [ 3 ]

11 голосов
/ 18 августа 2010

Избавьтесь от тега pre и просто дайте свой span style="white-space:pre". См. эту страницу для описания других white-space опций.

<pre> в основном говорит <div style="white-space:pre">; что вы хотите, это <span style="white-space:pre">.

5 голосов
/ 18 августа 2010

Теги абзаца не могут содержать элементы уровня блока:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

pre является элементом уровня блока.

Вместо этого вы можете установить стиль CSS white-space: pre для вашего диапазона, если вы хотите иметь pre -подобное поведение во встроенном элементе.

1 голос
/ 18 августа 2010

pre является элементом уровня блока, он не может быть внутри span, если память работает правильно.

Вы можете узнать, проверив свой HTML.

...