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

115

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

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

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

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

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

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

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

fgpx78
источник
любой код? может у вас где-то есть несовпадающий тег?
Нафтали, он же Нил,
Можете ли вы проверить HTML с помощью инструментов IE9 F12? Сообщает ли IE9, в каком режиме выполняется рендеринг? Quirks Mode, стандарты IE 7, IE 8, IE 9 (по умолчанию) и т. Д.
Дэн Соренсен,
Сегодня в блоге IE упоминается новый инструмент, помогающий устранить несовместимость с IE 9: blogs.msdn.com/b/ie/archive/2011/04/27/…
Дэн Соренсен,
Код действительно длинный, я не думаю, что проблема в этом. С инструментом F12 ошибок не обнаружено, а режим рендеринга - IE9. Я пробую Инспектор совместимости и сообщаю вам;) Я также проверил наличие ошибок в тегах (первое, что сделал), но не повезло
fgpx78
Кстати, я обнаружил проблему: похоже, что какой-то код javascript до тега HEAD вызывал проблему. IE9, похоже, не справляется с этим хорошо, ... это проблема, поскольку я решил проблему MVC, делая это ... Я вернулся к старому :) Спасибо всем.
fgpx78

Ответы:

72

введите описание изображения здесьУ меня точно такая же проблема. вы можете прочитать это 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);
Shanison
источник
Это решение устранило мою проблему. Прежде чем я нашел это решение, у меня возникла загадка.
Bearwulf
Ссылка больше не доступна.
Mason240
Он все еще доступен. Вы должны войти в систему, чтобы просмотреть содержимое. Я только что сделал скриншоты. Вы можете найти снимок экрана в моем ответе
Шенисон
Я также добавил & nbsp; в пустые ячейки.
Бакудан
что, если вы возвращаетесь не из ajax, а через частичное представление
leora
33

У меня была такая же проблема с заполнением таблицы с использованием шаблонов 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>
Jorge
источник
Спасибо, попробую, если проблема повторится. Рад знать, что это не только у меня;)
fgpx78
4
что? (это была моя первая реакция). Но это сработало! Спасибо вам большое!
Filipa Lacerda
1
Работал у меня Большое спасибо! +1 для вас
Саураб Баяни
Вы сэр, вы молодец! :-)
Сатья
Спасибо тебе большое за это! Удаление всех пробелов между начальным и конечным тегами <td> действительно сработало.
Фрэнки Лоскавио
14

Решение, данное @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. Попробуйте вместо этого использовать функцию обнаружения.

Рави Кадабоина
источник
11

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

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);
Будет лиска
источник
2

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

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

Дэн Соренсен
источник
Не удалось найти ничего с помощью инструмента. Просто большая проблема с проверкой из-за рендеринга движка aspnet (отсутствует конец / для некоторых мета-тегов и тегов ссылок в заголовке).
fgpx78
2

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

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

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

TAURI
источник
2

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

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

<td>gibberish</td>

пытаться:

<td><span>gibberish</span></td>
user1207607
источник
Мне нравится это решение. Это более просто, чем удаление пробелов между всеми элементами. Более того, у меня это сработало :-)
Р. Шрерс
2

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

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

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

Риш
источник
1

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

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

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

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

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

anneleenw
источник
0

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

Викас Павар
источник
0

У меня была аналогичная проблема с 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

Имеется такая же проблема форматирования с 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 строк требуется немного времени, но менее секунды, что для моих целей достаточно.

Том Риган
источник
0

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

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

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

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

dfsq
источник