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).

115
demandé sur BoltClock 2011-04-27 18:44:16

14 réponses

enter image description here 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);
72
répondu Shanison 2013-03-15 02:59:11

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>
33
répondu Jorge 2011-07-02 19:55:09

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.

14
répondu Ravi 2014-06-02 18:45:18

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);
11
répondu Will Liska 2012-04-09 19:00:32

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

2
répondu Dan Sorensen 2011-04-27 16:39:08

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 :)

2
répondu TAURI 2011-06-30 16:29:21

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>
2
répondu user1207607 2012-10-29 12:29:48

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)

2
répondu Rish 2016-06-16 09:55:31

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!

1
répondu anneleenw 2015-04-23 06:50:36

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.

0
répondu Vikas Pawar 2012-11-21 07:59:26

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 .

0
répondu Arun Pratap Singh 2014-03-06 07:29:24

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.

0
répondu Tom Regan 2015-03-03 19:19:44

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;
}
0
répondu Homer 2017-05-23 12:32:14

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.

-1
répondu dfsq 2014-04-25 15:09:48