Internet Explorer 9 ne rend pas correctement les cellules de table
mon site Web a toujours fonctionné en douceur avec IE8, IE7, FF, Chrome et Safari. Maintenant je le teste sur IE9 et je rencontre un problème étrange: dans certaines pages, certaines données tabulaires rendent incorrectement.
la source HTML est correcte et tout, et la ligne donnant le problème change chaque fois que je rafraîchis la page (pour dire la vérité, le problème lui-même apparaît seulement dans un certain rafraîchissement, pas tous).
en utilisant L'outil F12 de IE, la structure de la table semble correcte, il ne devrait pas y avoir de TD vide après le TD contenant M08000007448, mais il rend quand même comme ceci.
de plus, si j'utilise L'outil F12, avec l'outil" select element by click "dans la barre d'outils, et j'essaie de cliquer sur l'espace vide entre M08000007448 et 19 , Il sélectionne le TR, pas un"td caché".
j'ai cette table problème de rendu également dans une autre table de l'application, quelqu'un éprouvant quelque chose comme cela? Cela se produit seulement dans IE9 :(
Je ne sais pas si c'est important, mais la page est faite avec ASPNET (webforms) et utilise Jquery et un autre plugin JS.
j'ai essayé de sauver la page (avec des images) et l'ouvrir en local avec IE9, mais le problème ne se produit jamais. (Bien sûr, j'ai vérifié toute la structure de la table et c'est ok. L'en-tête et toutes les lignes ont le même eact nombre de TD, avec le bon nombre de colspan si nécessaire).
14 réponses
j'ai exactement le même problème. vous pouvez lire ce https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables
vous pouvez supprimer l'espace entre td en utilisant javascript si votre html est retourné d'ajax, puis de la réponse, vous le remplacez par
response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);
j'ai eu le même problème exact peuplant une table en utilisant des gabarits de jquery. J'ai continué à avoir 'ghost' <td>
' s sur des ensembles de données plus grands (300+) que dans IE9. Ces <td>
pousseraient les colonnes extérieures en dehors des limites de ma table.
j'ai corrigé ceci en faisant quelque chose de vraiment stupide; en enlevant tous les espaces entre les balises <td>
de début et de fin et en justifiant à gauche le balisage HTML se rapportant à ma table. En gros, vous voulez tout votre <td>
</td>
sur la même ligne, pas d'espaces.
exemple:
<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>
la solution donnée par @Shanison n'aide que partiellement mais le problème persiste s'il y a des espaces entre les autres éléments qui peuvent faire partie du modèle de contenu de table comme thead, th etc.
voici un meilleur regex conçu par mon chef au travail.
if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}
couvrant l'ensemble de la table, la légende, colgroup, col, tbody, thead, tfoot, tr, td, th éléments.
Note: jQuery.navigateur a été supprimé dans jQuery 1.9 Et is disponible uniquement par le jQuery.migrer plugin. S'il vous plaît essayer d'utiliser la détection de fonctionnalités à la place.
j'ai corrigé ce problème en supprimant l'espace blanc:
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 Blog mentionne un nouvel outil aujourd'hui appelé le Compat Inspector script pour aider à résoudre IE 9 rendre incompatibilité. Cela peut aider à résoudre votre problème.
http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx
j'avais ce problème aussi.
il m'est arrivé que attribut de largeur dans td/th tags causng ce problème.
changé en style= "largeur: XXpx" et le problème est résolu :)
j'ai rencontré ce problème aussi et j'ai réalisé que c'était arrivé quand je mettais directement du texte dans les éléments <td>
. Je ne sais pas s'il s'agit d'une norme ou non, mais après avoir enveloppé tout texte dans les éléments <span>
, les problèmes de rendu ont disparu.
donc au lieu de:
<td>gibberish</td>
, essayez:
<td><span>gibberish</span></td>
trouvé un très script utile pour prévenir cellules indésirables dans votre table html pendant le rendu.
function removeWhiteSpaces()
{
$('#myTable').html(function(i, el) {
return el.replace(/>\s*</g, '><');
});
}
cette fonction javascript que vous devez appeler lorsque la page se charge (i.e. onload event)
réponse tardive, mais j'espère pouvoir aider quelqu'un avec ça. J'ai éprouvé le même problème lors du débogage dans IE9. La solution était de supprimer tous les espaces dans le code HTML. Au lieu de
<tr>
<td>...</td>
<td>...</td>
</tr>
j'ai eu à faire
<tr><td>...</td><td>...</td></tr>
cela a semblé résoudre le problème!
C'est le bogue très grave dans IE9. Dans mon cas, enlever seulement les espaces blancs entre différents td n'était pas suffisant, donc j'ai enlevé les espaces entre différents tr aussi. Et il fonctionne très bien.
j'ai eu le même problème avec ie-9 lors du rendu de la table dynamique.
var table = $('<table><tr><td style="width :100"></td></tr></table>');
traduit par...
<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>
cela fonctionne parfaitement bien dans ie=10 safari chrome...
// but for ie-8 it renders to... with a style attr in my case
<table><tbody><tr><td ></td></tr></tbody></table>
, vous devez écrire 100px
au lieu de 100
.
ayant le même problème de formatage avec ie9, et une nouvelle édition dans ie11 où il formats correctement mais prend 25-40 secondes pour rendre une table d'environ 400 lignes et 9 colonnes. Il a la même cause, des espaces à l'intérieur des étiquettes tr ou td.
j'affiche une table créée par le rendu d'une vue partielle d'un appel AJAX. J'ai décidé de le BFH sur le serveur en enlevant l'espace blanc de la vue partielle rendue, en utilisant une méthode postée ici: http://optimizeasp.net/remove-whitespace-from-html
c'est sa solution copiée 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();
}
et voici une méthode qui renvoie une vue partielle comme une chaîne, volée à un autre so answer:
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
}
}
il faut un peu de temps, mais moins d'une seconde pour rendre une table d'environ 400 lignes, qui pour mes fins est assez bon.
j'ai eu ce problème parfois sur les tables générées par Knockout. Dans mon cas, je l'ai fixé en utilisant la solution jQuery trouvé ici
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;
}
j'ai eu le même problème avec KendoUI grid dans IE10. J'ai été en mesure de forcer IE à recréer les cellules manquantes de la table avec ce piratage:
htmlTableElement.appendChild(document.createTextNode(''));
L'ajout d'une table textNode vide rend IE plus susceptible de renvoyer l'ensemble de la table.