Internet Explorer 9 неправильно отображает ячейки таблицы

Question

Мой сайт всегда работал нормально с IE8, IE7, FF, Chrome и Safari. Сейчас я тестирую его на IE9 и испытываю странную проблему: на некоторых страницах некоторые табличные данные отображаются неправильно.

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

При использовании инструмента F12 IE структура таблицы выглядит корректно, после TD, содержащего M08000007448, не должно быть пустого TD, но все равно он выглядит так:

Более того, если я использую инструмент F12 с инструментом «выбрать элемент по щелчку» на панели инструментов и пытаюсь щелкнуть по пустому пространству между M08000007448 и 19, он выбирает TR, а не «скрытый тд».

У меня проблема с рендерингом таблицы также в другой таблице приложения, кто-нибудь испытывал что-то подобное? Это происходит только в IE9: (

Не знаю, важно ли это, но страница сделана с помощью ASPNET (веб-формы) и использует Jquery и некоторые другие плагины JS.

Я пытался сохранить страницу (с изображениями) и открыть ее локально с помощью IE9, но проблема никогда не возникает. (Конечно, я проверил всю структуру таблицы, и все в порядке. Заголовок и все строки имеют одинаковое количество TD, а при необходимости - правильное число colspan).

Answer 1

У меня точно такая же проблема.Вы можете прочитать это https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Вы можете удалить пробел между td, используя javascript, если ваш html возвращается из ajax, а затем из ответа вы заменяете его на

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

Answer 2

У меня была та же проблема с заполнением таблицы с помощью шаблонов jquery.У меня были «призраки» <td> на больших наборах данных (300+) только в IE9.Эти <td> будут выталкивать внешние столбцы за пределы моей таблицы.

Я исправил это, сделав что-то действительно глупое;удаляя все пробелы между начальными и конечными тегами <td> и оставляя, оправдывая разметку HTML, относящуюся к моей таблице.По сути, вы хотите, чтобы все ваши <td> </td> были в одной строке, без пробелов.

Пример:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

Answer 3

Решение, данное @Shanison, помогает только частично, но проблема сохраняется, если между любыми другими элементами, которые могут быть частью модели содержимого таблицы, такими как thead, th и т. Д., Существует пробел.

Вот лучшерегулярное выражение, разработанное моим руководителем на работе.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

, охватывающее все элементы таблицы, заголовка, группы, столбца, текста, текста, элементов tfoot, tr, td, th.

Примечание: jQuery.браузер был удален в jQuery 1.9 и доступен только через плагин jQuery.migrate.Пожалуйста, попробуйте вместо этого использовать функцию обнаружения.

Answer 4

Я исправил эту проблему, удалив пробелы:

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);

Answer 5

Найден очень полезный скрипт для предотвращения нежелательных ячеек в вашей html-таблице при рендеринге.

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

Эта функция javascript должна вызываться при загрузке страницы(то есть событие загрузки)

Answer 6

Я также столкнулся с этой проблемой и понял, что это произошло, когда я непосредственно вставлял текст в <td> элементы. Я не уверен, стандарт это или нет, но после обертывания любого текста в <span> элементы рендеринга исчезли.

Так что вместо:

<td>gibberish</td>

попробовать:

<td><span>gibberish</span></td>

Answer 7

У меня тоже была эта проблема.

Мне пришло в голову, что атрибут width in td / th tags вызывает эту проблему.

Изменил его на style = "width: XXpx" и проблема решена:)

Answer 8

IE Blog упоминает о новом инструменте, называемом сегодня Compat Inspector, для устранения проблем несовместимости IE 9. Это может помочь устранить проблему.

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Answer 9

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

<tr> <td>...</td> <td>...</td> </tr>

Я должен был сделать

<tr><td>...</td><td>...</td></tr>

Казалось, это решило проблему!

Answer 10

У меня была эта проблема иногда на таблицах, сгенерированных Knockout.В моем случае я исправил это с помощью решения jQuery, найденного здесь

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}