Internet Explorer 9 ne rend pas correctement les cellules du tableau

Mon site Web a toujours fonctionné sans problème 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 ne s'affichent pas correctement.

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 n'apparaît que dans certains rafraîchissements, pas tous).

En utilisant l'outil F12 d'IE, la structure de la table semble correcte, il ne devrait pas y avoir de TD vide après le TD contenant M08000007448, mais le rendu reste ainsi.

De plus, si j'utilise l'outil F12, avec l'outil "sélectionner élément par clic" dans la barre d'outils, et que j'essaye de cliquer sur l'espace vide entre M08000007448 et 19, il sélectionne le TR, pas un "td caché".

J'ai également ce problème de rendu de table dans une autre table de l'application, quelqu'un rencontre-t-il quelque chose comme ça? Cela n'arrive que dans IE9 :(

Je ne sais pas si c'est important, mais la page est faite avec ASPNET (formulaires Web) et utilise Jquery et un autre plugin JS.

J'ai essayé de sauvegarder la page (avec des images) et de 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 nombre de TD, avec le bon nombre de colspan si nécessaire).

J'ai exactement le même problème aussi. vous voudrez peut-être 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 renvoyé par ajax, puis à partir 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 de remplissage d'une table à l'aide de modèles jquery. J'ai continué à avoir des «fantômes» <td>sur des ensembles de données plus volumineux (300+) uniquement dans IE9. Celles <td>-ci pousseraient les colonnes extérieures en dehors des limites de ma table.

J'ai corrigé cela en faisant quelque chose de vraiment idiot; suppression de tous les espaces entre les <td>balises de début et de fin et à gauche justifiant le balisage HTML relatif à ma table. En gros, vous voulez que vous soyez tous <td> </td>sur la même ligne, sans 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 à @Shanison n'aide que partiellement, mais le problème persiste s'il y a des espaces entre l'un des autres éléments qui peuvent faire partie du modèle de contenu de table comme thead, th, etc.

Voici une meilleure regex conçue par mon responsable au travail.

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

couvrant tous les éléments de table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Remarque: jQuery.browser a été supprimé dans jQuery 1.9 et n'est disponible que via le plugin jQuery.migrate. Essayez plutôt d'utiliser la détection des fonctionnalités.

J'ai résolu 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);

Le blog IE mentionne aujourd'hui un nouvel outil appelé le script de l'inspecteur de compatibilité pour aider à résoudre l'incompatibilité de rendu d'IE 9. Cela peut vous 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 apparu que l' attribut width dans les balises td / th causait ce problème.

Changé en style = "width: XXpx" et le problème est résolu :)

J'ai également rencontré ce problème et j'ai réalisé que cela se produisait lorsque je mettais directement du texte dans des <td>éléments. Je ne sais pas si c'est une norme ou non, mais après avoir enveloppé du texte dans des <span>éléments, les problèmes de rendu ont disparu.

Donc au lieu de:

<td>gibberish</td>

essayer:

<td><span>gibberish</span></td>

J'ai trouvé un script très utile pour éviter les cellules indésirables dans votre table html lors du 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 (c'est-à-dire un événement onload)

Réponse tardive, mais j'espère pouvoir aider quelqu'un avec ça. J'ai rencontré le même problème lors du débogage dans IE9. La solution supprimait tous les espaces dans le code HTML. Au lieu de

<tr> <td>...</td> <td>...</td> </tr>

je devais faire

<tr><td>...</td><td>...</td></tr>

Cela semblait résoudre le problème!

C'est le bogue très sérieux dans IE9. Dans mon cas, supprimer uniquement les espaces blancs entre différents td n'était pas suffisant, j'ai donc supprimé les espaces entre différents tr également. Et cela fonctionne bien.

J'ai eu un problème similaire avec ie-9 lors du rendu de table dynamique.

var table = $('<table><tr><td style="width :100"></td></tr></table>');

une fois rendu se traduit par ...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

cela fonctionne parfaitement bien dans ie = 10 chrome safari ...

 //   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 100pxau lieu de 100.

Avoir le même problème de formatage avec ie9, et un nouveau problème dans ie11 où il se formate correctement mais prend 25 à 40 secondes pour rendre un tableau d'environ 400 lignes et 9 colonnes. Il a la même cause, des espaces à l'intérieur des balises tr ou td.

J'affiche une table créée par le rendu d'une vue partielle à partir d'un appel AJAX. J'ai décidé de le BFH sur le serveur en supprimant l'espace blanc de la vue partielle rendue, en utilisant une méthode publiée ici: http://optimizeasp.net/remove-whitespace-from-html

Voici sa solution copiée dans son intégralité:

    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 sous forme de chaîne, volée à une autre réponse SO:

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 un tableau d'environ 400 lignes, ce qui pour moi 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 corrigé en utilisant la solution jQuery trouvée 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 la grille KendoUI dans IE10. J'ai pu forcer IE à renvoyer les cellules de tableau manquantes avec ce hack:

htmlTableElement.appendChild(document.createTextNode(''));

L'ajout d'un textNode vide oblige IE à renvoyer la table entière.