У меня есть страница категорий, когда пользователь нажимает на нее, элементы под этой категорией загружаются через вызов 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, казалось, имела некоторые возможные решения. Из прошлого опыта я сначала попробую эти варианты.
Проблема, похоже, связана с белым интервалом.
Я нашел этот ответ на 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, '><');
Я использовал ответ из другого сообщения Удалить пробелы и разрывы строк между элементами 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.
Решение, данное @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.
Следуя советам Круммельца, добавив <meta http-equiv="X-UA-Compatible" content="IE=8" />, проблема исчезнет.
Для моей конкретной проблемы у меня есть jquery datepicker и регулярная метка, которая корректно отображается в IE9, но после того, как jquery-вызов ajax переместится вниз в данные. Помещение вышеуказанного тега исправляет его для меня. Это стоит попробовать. Удачи.
Белый интервал тоже был моей проблемой, хотя моя ситуация была немного иной. Этот поток помог мне исправить проблему (спасибо всем).
Моя таблица будет хорошо, а затем беспорядочно добавить столбец из ниоткуда после обратной передачи. Вот мой код до и после:
До: (у меня около 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>
Надеюсь, это тоже поможет кому-то.