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

Question

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

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

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

РЕДАКТИРОВАТЬ [2012/03/25]: Это приложение покинуло мои руки, поэтому я не могу проверить, какой из ответов работает. Ссылка, которую Адам Янгерс разместил на http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39, похоже, имела несколько возможных решений. Исходя из прошлого опыта, я бы сначала попробовал эти варианты ..

1. Добавление к элементу head страницы.
2. Попытаться удалить все пробелы между ячейками таблицы. Например. «

Answer 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, '><');

Answer 2

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

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 / 10Microsoft.

Answer 3

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

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

До: (у меня есть около 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>

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

Answer 4

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

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

Answer 5

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

Вот лучшее правило, разработанное моим руководителем на работе.

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

, охватывающий все элементы таблицы, заголовка, группы, столбца, тела, thead, tfoot, tr, td, th.