Таблица IE9 имеет случайные строки, которые смещены в случайных столбцах

У меня есть страница категорий, когда пользователь нажимает на нее, элементы под этой категорией загружаются через вызов jQuery Ajax в таблице и вставляются в элемент чуть ниже категории. Однако, похоже, что одна или две строки в загруженной таблице будут иметь смещение данных в случайном столбце. Я тестировал это в IE9, FF 3.6 и Chrome 13. Это ТОЛЬКО похоже происходит в IE9. Табличные данные отлично отформатированы - я использовал Fiddler для перехвата запросов, а затем посмотрел на raw html, и там ничего плохого не было.

Сайт был создан в ASP.NET MVC3. Таблица, возвращаемая с помощью запроса Ajax, возвращает частичный вид Razor. К сожалению, это должно работать в IE. Я действительно надеюсь, что у кого-то есть объяснение.

Вот пример: И другой:

EDIT [2012/03/25]: это приложение оставило мои руки, поэтому я не могу проверить, какие из ответов работают. Ссылка, которую Adam Youngers опубликовала в http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39, казалось, имела некоторые возможные решения. Из прошлого опыта я сначала попробую эти варианты.

Добавление < meta http-equiv = "X-UA-Compatible" content = "IE = 8" / > к элементу головы страницы.
Попытка удалить любое пустое пространство между ячейками таблицы. Например. "</td> <td> " вместо того, чтобы начать следующую ячейку в новой строке. (В прошлом это вызывало странные проблемы с расстоянием)

Ответ 1

Проблема, похоже, связана с белым интервалом.

Я нашел этот ответ на http://social.msdn.microsoft.com/Forums/en-AU/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90

Замените html, который вы получаете из вызова AJAX, используя регулярное выражение, подобное этому.

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
tableHtml = tableHtml.replace(expr, '><');

Ответ 2

Я использовал ответ из другого сообщения Удалить пробелы и разрывы строк между элементами HTML с помощью jQuery, где был script, который был более эффективен, чем тот, который указан выше. Я использовал ответ для его решения, но я повторю его для получения полного ответа.

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

В конечном счете, это только временное решение и должно быть исправлено в IE9/10 от Microsoft.

Ответ 3

Решение, данное @Johann Strydom, работает, но если вы не хотите касаться каждого элемента и просто сосредоточиться на модели содержимого таблицы.

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

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.

Ответ 4

Следуя советам Круммельца, добавив <meta http-equiv="X-UA-Compatible" content="IE=8" />, проблема исчезнет.

Для моей конкретной проблемы у меня есть jquery datepicker и регулярная метка, которая корректно отображается в IE9, но после того, как jquery-вызов ajax переместится вниз в данные. Помещение вышеуказанного тега исправляет его для меня. Это стоит попробовать. Удачи.

Ответ 5

Белый интервал тоже был моей проблемой, хотя моя ситуация была немного иной. Этот поток помог мне исправить проблему (спасибо всем).

Моя таблица будет хорошо, а затем беспорядочно добавить столбец из ниоткуда после обратной передачи. Вот мой код до и после:

До: (у меня около 10 других, которые отформатированы одинаково, не вызывают этой проблемы, но этот был)

<tr>
    <th class="width125px th-left-borders">
        Intangibles
    </th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox>
    </td>
</tr>

После: (удалены разрывы строк, которые обычно прекрасны, но по какой-то причине это вызывает проблему)

<tr>
    <th class="width125px th-left-borders">Intangibles</th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox></td>
</tr>

Надеюсь, это тоже поможет кому-то.