Internet Explorer 9 неправильно отображает ячейки таблицы - PullRequest
115 голосов
/ 27 апреля 2011

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

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

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

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

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

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

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

Ответы [ 14 ]

0 голосов
/ 03 марта 2015

Имеет ту же проблему форматирования с ie9 и новую проблему в ie11, где он правильно форматирует, но занимает 25-40 секунд, чтобы отобразить таблицу из 400 строк и 9 столбцов. У него та же причина - пробелы внутри тегов 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 строк, что для моих целей вполне достаточно.

0 голосов
/ 25 апреля 2014

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

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

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

0 голосов
/ 06 марта 2014

У меня была похожая проблема с 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.

0 голосов
/ 21 ноября 2012

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

...