2 бага в IE

в 8:59, , рубрики: html, ie8, web, Веб-разработка, метки: , ,

2 бага в IEРешил написать про баги в ie с которыми столкнулся на этой недели.
Перекопал весь гугл, даже на яндекс заходил, хотя по кодингу всегда ищу только в гугл, про данную проблему никто не слышал и не встречал.
Задача стояла вывести данные из БД в таблицу и представить это все в виде веб-морды, соответственно все это кроссбраузерное.

Поехали

Вот значит, вывожу я данные из БД в таблицу, дальше стоит задача по редактированию этих данных.
У нас это делается двойным кликом по тексту, на js это попадает в input, по enter это все записывается в БД.
Все бы ничего, но вот только данные у нас сортируются по пробелам в начале и в конец строки.

И вот тут наступает геморрой

Все нормальные браузеры не отображают пробелы визуально, но хранят их в DOM, тут все хорошо и проходит без проблем с редактированием, но IE конечно тоже не отображает пробелы, но и не хранит больше одного пробела в DOM, поэтому после редактирование в БД остается только один пробел.
Первое что пришло на ум хранить пробелы в БД, а при выводе в веб-морду конвертировать их в « » работало криво, точней через раз как-то.
Тут меня осенило, что есть замечательный тег <pre>, который отображает все как есть, обрамляем вуаля, все пробелы показываются как нужно и в IE тоже, но нам не нужно их показывать, так как смотрится это некрасиво и криво «&nbsp;»только в профиль.

Погуглил добавил css стиль «white-space: nowrap;» чтобы убрать визуальное отображение пробелов, и опять везде нормально, а IE отличился! Хотя в документации написано поддерживается всеми браузерами.
Тут я, как только не боролся, победить ни смог. Решил делать невидимый тег <pre>, а рядом видимый тег <p>. Костыль, но работает пока нормально.

Если кто знает решение, пишите в коментах, буду рад исправить.

P.S: тестировал только на ie-8, так как большинство нашего коллектива, пользуется именно этим браузером.

Автор: lesha_firs

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js