Internet Explorer 9 неправильно відображає комірки таблиці

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

Джерело HTML правильне, і все, і рядок, що дає проблему, змінюється щоразу, коли я оновлюю сторінку (правду кажучи, сама проблема з’являється лише в деякому оновленні, не у всіх).

Використовуючи інструмент F12 IE, структура таблиці виглядає правильною, після TD не повинно бути порожнього TD, що містить M08000007448, але все одно він виглядає так.

Більше того, якщо я використовую інструмент F12, з інструментом "select element by click" на панелі інструментів, і я намагаюся натиснути на порожній простір між M08000007448 та 19, він вибере TR, а не "прихований td".

У мене ця проблема відображення таблиці також в якійсь іншій таблиці програми, хтось відчуває щось подібне? Це відбувається лише в IE9 :(

Я не знаю, чи це важливо, але сторінка зроблена за допомогою ASPNET (веб-форм) і використовує Jquery та деякі інші плагіни JS.

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

У мене точно така ж проблема. ви можете прочитати це https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-isissue-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, допомагає лише частково, але проблема не зникає, якщо між будь-якими іншими елементами є пробіли, які можуть бути частиною моделі вмісту таблиці, як-от, те та ін.

Ось кращий вираз, розроблений моїм керівництвом на роботі.

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

, що охоплює всі елементи таблиці, підписи, колгрупи, кола, теді, теда, 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. У моєму випадку видалення лише білих проміжків між різними ТД було недостатньо, тому я також видалив пробіли між різними тр. І це чудово працює.

У мене була аналогічна проблема з ie-9 при візуалізації динамічної таблиці.

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

коли надається перекладається на ...

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

це прекрасно працює, тобто = 10 хромованих сафарі ...

 //   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, де вона форматується правильно, але потрібно 25-40 секунд, щоб відобразити таблицю приблизно з 400 рядків та 9 стовпців. Він має ту саму причину, пробіл всередині тегів tr або td.

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

Це його рішення скопійовано в тото:

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

    }

Ось метод, який повертає частковий вигляд у вигляді рядка, викраденого з іншої відповіді ТА:

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 рядків, що для моїх цілей досить добре.

Я мав цю проблему іноді на таблицях, створених нокаутом. У моєму випадку я виправив це за допомогою знайденого тут рішення 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 переглянути всю таблицю.