Internet Explorer 9 pas rendu les cellules d'un tableau correctement

Question

Mon site a toujours fonctionner sans problème avec IE8, IE7, FF, Chrome et Safari. Maintenant, je suis en essais sur IE9 et je suis confronté à un problème étrange: en quelques pages, quelques données tabulaires rend de manière incorrecte.

Le code source HTML est correct et tout, et la ligne en donnant le problème change à chaque fois que j'actualise la page (pour dire la vérité, le problème lui-même n'apparaît que dans certains actualisation, pas tous).

À l'aide de la touche F12 Outil de IE, la structure de la table s'affiche correctement, il ne devrait pas être vide TD après le TD contenant M08000007448, mais encore il les rend comme ça.

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

Je vais avoir cette table de problème de rendu également dans certains autres de la table dans l'application, n'importe qui ayant quelque chose comme cela? Il ne se produit que dans IE9 :(

Je ne sais pas si c'est important, mais la page est faite avec le RÉSEAU (webforms) et l'utilisation de Jquery et quelques autres JS du plugin.

J'ai essayé d'enregistrer 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 de toutes les lignes de l'eact même nombre de TD, avec le bon nombre de colspan si nécessaire).

Answer 1

J'ai exactement le même problème. vous pouvez lire cet https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Vous pouvez supprimer l'espace entre les deux td à l'aide de javascript si votre code html est renvoyé de l'ajax, puis à partir de la réponse, vous la remplacez par

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

Answer 2

J'ai eu exactement le même problème de remplissage d'une table à l'aide de jquery templates. J'ai continué à avoir du "fantôme" <td>s'sur plus grands ensembles de données (+de 300) uniquement dans IE9. Ces <td>s'pousser les colonnes extérieures en dehors des limites de mon tableau.

J'ai résolu en faisant quelque chose de vraiment stupide; la suppression de tous les espaces situés entre l' <td> de début et de fin de balises et de gauche justifiant le balisage HTML relatives à ma table. Fondamentalement, vous voulez que tous vos <td> </td> sur la même ligne, sans espace.

Exemple:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

Answer 3

La solution proposée par @Shanison contribue que partiellement, mais le problème persiste si il y a des espaces entre les un des autres éléments qui peuvent faire partie de la table de modèle de contenu comme thead, th etc.

Voici une meilleure regex conçu par mon chef à l'œuvre.

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.

Remarque: jQuery.navigateur a été supprimé en jQuery 1.9 et est uniquement disponible via le jQuery.migrer plugin. S'il vous plaît essayez d'utiliser la fonctionnalité de détection de la place.

Answer 4

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

Answer 5

J'ai eu ce problème aussi.

Elle s'est produite à moi, que la largeur de l'attribut dans le document td/th tags causng ce problème.

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