Раздражение с пробелом после <span>тегов в Internet Explorer

Question

<div onclick="alert(this.innerHTML);">

<p>Since you saw <span title=":P" class="emoticon tongue"></span> if <strong>you read</strong> the intro post <span title=":D" class="emoticon laugh"></span><span title=":D" class="emoticon laugh"></span> a</p>

</div>

У меня есть эта разметка, она в порядке и ведет себя как и ожидалось во всех других браузерах (как обычно), но в IE, когда я предупреждаю об этом, она показывает мне разметку без пробела перед "if" и последним "a" Я делаю некоторые манипуляции, используя этот html с jquery, и это становится головной болью, что в обработанной строке эти пробелы всегда отсутствуют, даже если я просматриваю исходный код в IE, пробелы присутствуют (что и почему он отображает правильно), но никогда не возвращает мне актуальный html по тревоге или после манипуляции

Спасибо

РЕДАКТИРОВАТЬ: По сути, в этом случае использования я сталкиваюсь с проблемой: вы видите HTML-код поста, который можно редактировать языком эмоций и т. Д., Это промежутки, которые вызывают эмоции на моем сайте с Свойство background в CSS, есть кнопка редактирования под сообщением, когда вы нажимаете EDIT .. он помещает этот текст в div contenteditable = "true" и заменяет промежутки текстовыми эквивалентами ": P" и ": D". но в IE мне возвращают это ": Pif" и в других браузерах ... как и ожидалось .. это ": P if". << обратите внимание на пробел. </p>

Answer 1

В обоих случаях у вас есть пробел, интервал (или два) без внутреннего текста и еще один пробел. Два пробела вместе должны объединиться в один пробел, поскольку пробел после первого не имеет значения в HTML. Если вы хотите, чтобы пробел всегда был пробелом, используйте   (Или используйте современный подход и используйте CSS для настройки размера ваших интервалов.

Answer 2

пытались ли вы использовать   вместо пробелов, подобных этому:

<div onclick="alert(this.innerHTML);">

<p>Since you saw <span title=":P" class="emoticon tongue"></span>&nbsp;if <strong>you read</strong> the intro post <span title=":D" class="emoticon laugh"></span><span title=":D" class="emoticon laugh"></span>&nbsp;a</p>

</div>

Answer 3

Причина, по которой вы получаете это, состоит в том, что вы запутали .innerHTML в значении исходного кода div - .innerHTML содержит HTML , а не текст исходного кода. Это могут быть две разные вещи. В этом случае лишний пробел не имеет смысла для парсера HTML - он может отказаться от бессмысленного лишнего пробела.

В другом примере посмотрите на заглавные буквы - вы, возможно, этого не заметили, но в вашем диалоговом окне с предупреждением, вероятно, отображаются имена тегов с заглавной буквы в IE.

И перед тем, как вы начнете на "вину IE", я предлагаю вам попробовать следующее в FireFox:

<div onclick="alert(this.innerHTML);">

<p>Since you saw <span title=":P" class="emoticon tongue"></span> if <strong>you read</strong> the intro post <span title=":D" class="emoticon laugh"></span><span title=":D" class="emoticon laugh"></span><u<i> a</p>

</div>

Я добавил сломанный тег рядом с: <u<i>

В IE, Safari, Opera и Chrome браузер правильно интерпретирует это как неверное имя тега (это не подчеркивание или курсив). Однако у движка Mozilla была длительная ошибка, из-за которой он не только видит тег подчеркивания (он не должен этого делать, поскольку технически является частью имени, а допустимый тег с именем «u <» отсутствует) равен <em>также интерпретирует там курсив. Запустите код в Mozilla / FireFox, и ваше диалоговое окно с предупреждением будет содержать следующую строку: <u ><i> a</i></u>. Вы, конечно, не написали это, не так ли? Однако это правильное поведение; innerHTML возвращает HTML , полученный браузером, а не исходный код. Поскольку Mozilla извлекает эти теги, они возвращаются правильно, когда вы их запрашиваете.

РЕДАКТИРОВАТЬ: чтобы уточнить мою терминологию, я использую «HTML» для ссылки на дерево DOM HTML (конечно, для создания дерева DOM синтаксический анализатор HTML не требуется, но в какой-то момент он преобразует текст в менее двусмысленную проанализированную форму, которую я называю HTML ), и «Исходный код» для ссылки на текст исходного кода HTML, который анализируется для его создания.