Возврат перевозки вызывает визуальное пространство в Internet Explorer 8

StackOverflow https://stackoverflow.com/questions/1965372

Вопрос

Возвращение кареты в моем HTML -коде вызывает визуальное пространство в визуализированном HTML в Explorer 8. Я предполагаю, что это также повлияет на другие версии.

Например:

<span>
(111)&nbsp;
222-
3333&nbsp;
444444
</span>

Похоже:

(111)  222- 3333  444444

После первого кронштейна должно быть всего 1 пространство, нет места после приборной панели и только 1 пространство после последнего 3. Мне нравятся возвраты перевозки для чтения кода, возможно ли, идите, и все еще получайте HTML должным образом рендеринг в т.е. ?

Вот информация Doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Редактировать:
На самом деле я делаю это в приложении ASP.NET MVC 2, и разметка шаблона ASPX довольно словеса, поэтому я пытался разделить его на несколько строк:

<span>
(<%=((Model == null || Model.AreaCode == null) ? "" : Model.AreaCode).PadRight(3)%>)&nbsp;
<%=((Model == null || Model.Prefix == null) ? "" : Model.Prefix).PadRight(3)%>-
<%=((Model == null || Model.Suffix == null) ? "" : Model.Suffix).PadRight(4)%>&nbsp;
<%=(Model == null || Model.Extension == null) ? "" : Model.Extension%>
</span>
Это было полезно?

Решение

Это сценарий, где sprintf Типовые функции действительно сияют. В мире .NET они обрабатываются String.Format. Анкет Вот Документация MSDN И вы можете переписать код как -то вроде этого:

<span>
<%= String.Format("({0:###}) {1:###}-{2:####} {3}", Model.AreaCode, Model.Prefix, Model.Suffix, Model.Extension); %>
</span>

Я немного ржавым на синтаксисе формата .NET String, поэтому никаких гарантий в этом фрагменте кода. Вот еще одна ссылка:

http://blog.stevex.net/string-formatting-in-csharp/

Другие советы

В HTML символ FormFeed (U+000C) рассматривается как белое пространство, в XHTML

http://www.w3.org/tr/xhtml1/#c_15

Также http://www.w3.org/tr/xhtml1/#uaconf (пункт 9):

Белое пространство обрабатывается в соответствии со следующими правилами. Следующие символы определены в [xml] Символах Белого пространства:

Space () Horizontal Tabulate () Carriage return () Line Feed () Процессор XML нормализует конечные коды линии различных систем в один символ подачи отдельной линии, который передается применению.

Пользовательский агент должен использовать определение из CSS для обработки символов пробелов [CSS2]. Обратите внимание, что рекомендация CSS2 явно не рассматривает проблему обработки пробелов в нелатинских наборах символов. Это будет рассмотрено в будущей версии CSS, когда эта ссылка будет обновлена.

Не только в IE8. Я проверил это с хромом, и это дает тот же результат. Сначала вам нужно удалить пространство из <pan> < /span> element it it self. И на самом деле есть 2 места между (111) 222 и 3333 44444. Таким образом, кажется, что каждая возврата каретки занимает одно пустое пространство.

Это совершенно нормально, рассмотрим этот HTML ...

<html>
  <head>
  </head>
  <body>
    This is some static text
    with carriage return
    <span>
      (111)&nbsp;222- 3333&nbsp;444444
    </span>
  </body>
</html>

Вывод будет ...

Это некоторый статический текст с возвратом перевозки (111) 222-3333 444444

Следите за пространством между текстом и в статическом тексте. Таким образом, перевод возврата каретки в космос кажется общим правилом для HTML.

Новая линия - это пространство.

Если вы действительно хотите эти вещи на отдельных строках, вы можете использовать HTML -комментарии:

<span><!--
-->(111)&nbsp;<!--
-->222-<!--
-->3333&nbsp;<!--
-->444444<!--
--></span>

Хотя это не слишком здорово для читаемости. Лично я не вижу, что нечитаемо, ставя все это на одну линию. Вы могли бы сделать:

<span style="white-space:nowrap">(111) 222-3333 444444</span>

Если вы чувствуете &nbsp;S делает его нечитаемым.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top