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

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

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

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

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

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

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

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

У меня точно такая же проблема. вы можете прочитать это 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);

У меня была такая же проблема с заполнением таблицы с использованием шаблонов 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>

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

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

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

охватывает все элементы table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

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

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

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);

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

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

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

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

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

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

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

<td>gibberish</td>

пытаться:

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

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

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

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

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

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

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

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

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

Это очень серьезная ошибка IE9. В моем случае удаления только пробелов между разными td было недостаточно, поэтому я также удалил пробелы между разными tr. И работает нормально.

У меня была аналогичная проблема с ie-9 при рендеринге динамической таблицы.

var table = $('<table><tr><td style="width :100"></td></tr></table>');

при визуализации переводится как ...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

это отлично работает в IE = 10 chrome safari ...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

вам нужно писать 100pxвместо 100.

Имеется такая же проблема форматирования с ie9 и новая проблема в ie11, где он форматируется правильно, но для визуализации таблицы из примерно 400 строк и 9 столбцов требуется 25-40 секунд. Причина та же - пробелы внутри тегов tr или td.

Я показываю таблицу, созданную путем рендеринга частичного представления из вызова AJAX. Я решил BFH его на сервере, удалив пробелы из визуализированного частичного представления, используя метод, размещенный здесь: http://optimizeasp.net/remove-whitespace-from-html

Это его решение, скопированное in-toto:

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

А вот метод, который возвращает частичное представление в виде строки, украденной из другого ответа SO:

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

Для отрисовки таблицы из примерно 400 строк требуется немного времени, но менее секунды, что для моих целей достаточно.

У меня иногда возникала эта проблема на таблицах, созданных 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;
}

У меня была такая же проблема с сеткой KendoUI в IE10. Я смог заставить IE повторно отображать отсутствующие ячейки таблицы с помощью этого хака:

htmlTableElement.appendChild(document.createTextNode(''));

Добавление пустого textNode заставляет IE повторно визуализировать всю таблицу.