Ячейки таблицы в IE9

@kmi · Регистрация: 26.04.2010

Author24 — интернет-сервис помощи студентам

Неожиданно наткнулся на проблему отображения таблицы в IE9 (001.png). В строке появляется "пустая" область шириной ровно в одну ячейку, в результате чего ячейки сдвигаютя вправо. При этом это именно "пустая" область, она ничем не занята (структура, показываемая для строки в Инструментах разработчика IE9, приведена в 002.png).

Однако в IE8 или в IE9 в режиме совместимости с IE8 всё отображается корректно (003.png).

Стили всех ячеек одинаковые.

В чём может быть затык?

@Vlad_IT · 26.12.2012, 12:18

У меня все нормально. Покажите Ваш код, но не тот что дает IE, а то что Вы написали, еще бы стиль, там тоже может быть проблема. Вот этот код работает

HTML5

<table>
    <tbody>
        <tr class="brTableRow">
            <td>
                <nobr> 6,864 </nobr>
            </td>
            <td>
                <nobr> 1,664 </nobr>
            </td>
        </tr>
        <tr class="brTableRow">
            <td>
                <nobr> 3,514 </nobr>
            </td>
            <td>
                <nobr> 14,636 </nobr>
            </td>
        </tr>
        <tr class="brTableRow">
            <td>
                <nobr> 3,125 </nobr>
            </td>
            <td>
                <nobr> 2,123 </nobr>
            </td>
        </tr>
    </tbody>
</table>

@kmi · 26.12.2012, 13:55 **[ТС]**

Уфф... Разобрался. В коде html таблицы были символы переноса строки. Именно они приводили к появлению пустых текстовых узлов между ячейками таблицы. Естественно, никаких узлов в этом месте быть не должно, это - баг IE9. Но в результате обработки такого "оптимизированного" DOM-а проявляется второй баг IE9, связанный с отображением таблицы на экране.

Стоило пройтись по исходному коду страницы так, чтобы между тэгами в таблице не оставалось никаких символов, в т.ч. непечатных, - и всё заработало!

Кстати, в IE8 и во всех других браузерах пустые текстовые узлы не появляются.

P.S. Если кому нужно, вот регулярка для вычищения лишнего:

Javascript

1 2	var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); tableHtml = tableHtml.replace(expr, '><');

@iPIPka · 27.08.2013, 14:25

kmi, спасибо, что рассказали как бороться с этой напастью. А то у меня тоже вылезает в проекте данный баг!

@kmi 55 / 55 / 14 Регистрация: 26.04.2010 Сообщений: 177
		1
	Ячейки таблицы в IE9 26.12.2012, 11:33. Показов 1535. Ответов 3 Метки нет (Все метки) Неожиданно наткнулся на проблему отображения таблицы в IE9 (001.png). В строке появляется "пустая" область шириной ровно в одну ячейку, в результате чего ячейки сдвигаютя вправо. При этом это именно "пустая" область, она ничем не занята (структура, показываемая для строки в Инструментах разработчика IE9, приведена в 002.png). Однако в IE8 или в IE9 в режиме совместимости с IE8 всё отображается корректно (003.png). Стили всех ячеек одинаковые. В чём может быть затык? Миниатюры Изображения 0

@iPIPka 39 / 39 / 5 Регистрация: 06.02.2011 Сообщений: 123
	27.08.2013, 14:25	4
	kmi, спасибо, что рассказали как бороться с этой напастью. А то у меня тоже вылезает в проекте данный баг! 0