Internet Explorer 9 ne rend pas correctement les cellules du tableau


115

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


n'importe quel code? peut-être avez-vous une balise incompatible quelque part?
Naftali aka Neal

Êtes-vous capable de valider le HTML à l'aide des outils IE9 F12? IE9 vous indique-t-il dans quel mode il est rendu? Quirks Mode, IE 7, IE 8, IE 9 Standards (par défaut), etc ...
Dan Sorensen

Le blog IE mentionne aujourd'hui un nouvel outil pour aider à résoudre l'incompatibilité d'IE 9: blogs.msdn.com/b/ie/archive/2011/04/27/…
Dan Sorensen

Le code est vraiment long, je ne pense pas que le problème soit là. Aucune erreur trouvée avec l'outil F12 et le mode de rendu est IE9. J'essaie l'inspecteur de compatibilité et je vous le fais savoir;) J'ai également vérifié les erreurs de balises (première chose que j'ai faite) mais pas de chance
fgpx78

BTW, j'ai trouvé le problème: il semble que du code javascript avant la balise HEAD était à l'origine du problème. IE9 ne semble pas bien le gérer, ... c'est un problème depuis que j'ai résolu un problème MVC en faisant cela ... Je suis de retour à l'ancien :) Merci à tous.
fgpx78

Réponses:


72

entrez la description de l'image iciJ'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);

Cette solution a résolu mon problème. Cela m'a donné une énigme silencieuse avant de trouver cette solution.
Bearwulf

Le lien n'est plus disponible.
Mason240

Il est toujours disponible. Vous devez vous connecter pour voir le contenu. J'ai juste pris une capture d'écran. Vous pouvez trouver la capture d'écran dans ma réponse
Shanison

J'ai également ajouté & nbsp; aux cellules vides.
Bakudan

Et si vous ne
revenez pas d'Ajax

33

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>

Merci, je vais essayer si le problème se reproduit. Heureux de savoir que je ne suis pas le seul à l'avoir;)
fgpx78

4
quoi? (c'était ma première réaction). Mais ça a marché! Merci beaucoup!
Filipa Lacerda

1
A travaillé pour moi Merci beaucoup! +1 pour vous
Saurabh Bayani

Vous monsieur, vous êtes génial! :-)
Satya

Merci beaucoup pour cela! La suppression de tous les espaces entre les balises de début et de fin <td> fonctionnait en fait.
Frankie Loscavio

14

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.


11

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

2

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


Je n'ai rien trouvé avec l'outil. Juste beaucoup de problèmes de validation dus au rendu du moteur aspnet (extrémité manquante / pour certaines balises meta et link dans l'en-tête).
fgpx78

2

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


2

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'aime cette solution. C'est plus simple que de supprimer l'espace blanc entre tous les éléments. De plus, cela a fonctionné pour moi :-)
R. Schreurs

2

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)


1

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!


0

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.


0

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.


0

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.


0

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;
}

-1

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.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.