Баг в IE9 — проблема с тэгом p, разрывающая мозг

Здравствуйте, уважаемые читатели моего блога.

Сегодня день Конца Света, но мне лично он представляется как светлый лучик солнца, потому как именно сегодня, по прошествии трёх суток мучительного поиска, я нашёл решение бага IE9, связанного с тэгом <p> (тэг параграфа).

Суть заключается в том, что если на HTML-странице есть незакрытые тэги <p>, то IE9 пытается его закрыть автоматически. И это в целом правильно, так говорит нам спецификация HTML от W3C. Но IE9 делает это не совсем корректно, прямо скажем, ВООБЩЕ неправильно.

В моём случае это проявилось вот каким образом.

У меня есть несложная страница в админке, содержащая немного текста и форму. Вот ключевой блок:

<html>
<body>
Тексты
<p>Подпись перед формой
<form>
 <input>
 <div>
     <input>
 </div>
</form>

Как вы видите, тэг <p> перед формой не закрыт. И все браузеры обрабатывают этот факт вполне корректно. Но не IE9. Эта *censored* почему-то считает, что тэг нужно закрыть перед <div> внутри формы. А  чтобы соблюсти вложенность, закрывает ещё и <form> перед этим <div> !!! В итоге больше половины полей формы оказываются «за бортом» и их не видит вообще никто — ни дебаггер, ни jQuery, ни тем более getElementsByTagName(). Причём в дебаггере этих автозакрытых тэгов НЕ видно, и тем самым при просмотре невозможно понять — почему контролов формы «не видно». Графически в браузере всё отображается нормально. Даже POST формы отрабатывает нормально. Эти контролы не видит только javascript.

Как же мне удалось увидеть это?

Первое, что натолкнуло меня на мысль об раннем автозакрытии формы — это вывод содержимого формы строкой $(‘form’).html() которая вывела только контролы до <div>. Через многие часы поиска я догадался сделать так: $(‘body’).html(), которая (о чудо!) вывела мне содержимое страницы так, как видит это парсер IE9, а именно — с закрытым тэгом </form> перед <div>. Но, что интересно, закрытого тэга </p> я там не увидел. А догадался только методом «тыка», закрыв тэг перед <form>. Всё заработало!

Уже потом на просторах зарубежного интернета я увидел багрепорты, связанные с тэгом <p>, но, как Вы понимаете, в моём случае это было изначально совсем не очевидно.

Всё. Всем спасибо. Надеюсь, своей сегодняшней находкой я сэкономил Вам кучу времени.

Отправить ответ

Оставьте первый комментарий!

Notify of
avatar
wpDiscuz