web-dev-qa-db-fra.com

Internet Explorer 9 ne rend pas les cellules de tableau correctement

Mon site Web a toujours fonctionné sans heurts 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 sont mal rendues. 

La source HTML est correcte et tout, et la ligne donnant le problème change à chaque fois que j'actualise la page (à vrai dire, le problème lui-même n'apparaît que dans certains rafraîchissements, pas tous).

À l'aide de l'outil F12 de IE, la structure de la table semble correcte, il ne devrait pas y avoir de vide TD après le TD contenant M08000007448, mais le rendu est toujours le même.

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'essaie de cliquer sur l'espace vide entre M08000007448 et 19, il sélectionne le TR, pas un "td caché".

J'ai ce problème de rendu de table également dans une autre table de l'application, est-ce que quelqu'un rencontre 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 (webforms) 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 ça a été correct. En-tête et toutes les lignes ont le même nombre de TD, avec le bon nombre de colspan si nécessaire).

jqueryasp.netinternet-explorer-9html-table
115
fgpx78

enter image description hereJ'ai exactement le même problème aussi. vous voudrez peut-être lire ceci 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 code html est renvoyé par ajax, puis dans la réponse, vous le remplacez par 

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);
72
Shanison

J'ai eu exactement le même problème lors du remplissage d'une table à l'aide de modèles jQuery. Je continuais à avoir des "fantômes" <td> sur de plus grands ensembles de données (300+) uniquement dans IE9. Ces <td> poussent les colonnes extérieures en dehors des limites de ma table.

J'ai résolu ce problème en faisant quelque chose de vraiment stupide; en supprimant tous les espaces entre les balises de début et de fin <td> et en laissant à gauche le balisage HTML relatif à ma table. En gros, vous voulez que tous vos <td></td> se trouvent 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>
33
Jorge

La solution donnée par @Shanison n’aide que partiellement, mais le problème persiste s’il existe des espaces entre les autres éléments pouvant faire partie du modèle de contenu de la table, tels que 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 tous les éléments de table, de légende, de groupe, de col, de tbody, de tête, de pied, de pied, de pied, de tête et de tête.

Remarque: jQuery.browser a été supprimé de jQuery 1.9 et est disponible uniquement via le plug-in jQuery.migrate. S'il vous plaît essayez d'utiliser la détection de fonctionnalité à la place.

14
Ravi

J'ai résolu ce problème en supprimant les espaces:

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
Will Liska

J'ai rencontré ce problème aussi et je me suis rendu compte que c'était arrivé lorsque je mettais du texte directement dans des éléments <td>. Je ne suis pas certain qu'il s'agisse d'un standard ou non, mais après avoir inséré du texte dans des éléments <span>, les problèmes de rendu ont disparu. 

Donc au lieu de:

<td>gibberish</td>

essayer:

<td><span>gibberish</span></td>
2
user1207607

J'avais aussi ce problème.

Il m'est apparu que l'attribut width in td/th tags causait ce problème. 

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

2
TAURI

Nous avons trouvé un très script utile pour empêcher cellules non désirées dans votre tableau html lors du rendu.

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

Cette fonction javascript à appeler lors du chargement de la page (événement onload)

2
Rish

IE Blog mentionne un nouvel outil appelé aujourd'hui le script Compat Inspector pour aider à résoudre les problèmes d'incompatibilité de rendu avec IE 9. Cela peut aider à résoudre votre problème.

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

2
Dan Sorensen

Réponse tardive, mais j'espère pouvoir aider quelqu'un avec cela ..___ 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!

1
anneleenw

J'ai eu ce problème parfois sur des tables générées par Knockout. Dans mon cas, je l'ai corrigé avec 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;
}
0
Homer

C'est le très grave bug 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 ça marche bien.

0
Vikas Pawar

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

lorsque rendu traduit à ...

<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 100px au lieu de 100.

0
Arun Pratap Singh

Avoir le même problème de formatage avec ie9 et un nouveau problème dans ie11 où le formatage est correct mais prend 25 à 40 secondes pour générer un tableau d'environ 400 lignes et 9 colonnes. Il a la même cause, les espaces dans les 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 supprimer sur le serveur en supprimant les espaces de la vue partielle rendue, à l'aide d'une méthode publiée ici: http://optimizeasp.net/remove-whitespace-from-html

Voici 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 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 générer un tableau d’environ 400 lignes, ce qui, à mon avis, est suffisant.

0
Tom Regan