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

Ответ 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);

Ответ 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>

Ответ 3

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

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

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

охватывающий все таблицы, заголовки, colgroup, col, tbody, thead, tfoot, tr, td, th.

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

Ответ 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);

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

Итак, вместо:

<td>gibberish</td>

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

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

Ответ 8

Нашел очень полезный script, чтобы предотвратить нежелательные ячейки в вашей таблице html во время рендеринга.

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

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

Ответ 9

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

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

Мне пришлось делать

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

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

Ответ 10

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

Ответ 11

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

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

Когда rendered переводит на...

<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.

Ответ 12

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

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

Это его решение, скопированное into 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 строк, что для моих целей достаточно.

Ответ 13

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

Ответ 14

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

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

Добавление пустого текстовогоNode делает IE для ретрансляции всей таблицы.