jquery - Internet Explorer 9 no muestra las celdas de la tabla correctamente

asp.net internet-explorer-9

Question

Mi sitio web siempre se ha ejecutado sin problemas con IE8, IE7, FF, Chrome y Safari. Ahora lo estoy probando en IE9 y estoy experimentando un problema extraño: en algunas páginas, algunos datos tabulares se representan incorrectamente.

La fuente HTML es correcta y todo, y la fila que da el problema cambia cada vez que actualizo la página (a decir verdad, el problema en sí mismo aparece solo en algunos refrescos, no en todos).

Usando la herramienta F12 de IE, la estructura de la tabla parece correcta, no debe haber un TD vacío después de que el TD contenga M08000007448, pero aún se renderiza así.

Además, si utilizo la herramienta F12, con la herramienta "seleccionar elemento por clic" en la barra de herramientas, e intento hacer clic en el espacio vacío entre M08000007448 y 19, selecciona TR, no un "td oculto".

Estoy teniendo este problema de representación de tabla también en alguna otra tabla en la aplicación, ¿alguien experimenta algo como esto? Sucede solo en IE9 :(

No sé si es importante, pero la página está hecha con ASPNET (formularios web) y usa Jquery y algún otro plugin de JS.

Intenté guardar la página (con imágenes) y abrirla en local con IE9, pero el problema nunca ocurre. (Por supuesto que revisé toda la estructura de la tabla y está bien. El encabezado y todas las filas tienen el mismo número de TD, con el número correcto de colspan cuando es necesario).

Answer 1

Última respuesta, pero espero poder ayudar a alguien con esto. Experimenté el mismo problema al depurar en IE9. La solución fue eliminar todos los espacios en blanco en el código HTML. En lugar de

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

Tenía que hacer

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

¡Esto pareció resolver el problema!

Answer 2

A veces tuve este problema en las tablas generadas por Knockout. En mi caso lo arreglé usando la solución jQuery que se encuentra aquí

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

Answer 3

Encontré una secuencia de comandos muy útil para evitar celdas no deseadas en su tabla html durante el proceso.

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

Esta función de JavaScript debe llamar cuando se carga la página (es decir, evento de carga)

Answer 4

Este es el error muy serio en IE9. En mi caso, eliminar solo espacios en blanco entre diferentes td no fue suficiente, por lo que también he eliminado espacios entre diferentes tr. Y está funcionando bien.

Answer 5

IE Blog menciona una nueva herramienta llamada hoy la secuencia de comandos Inspe Inspector para ayudar a solucionar la incompatibilidad de la representación de IE 9. Puede ayudar a solucionar su problema.

blogs.msdn.com/b/ie/archive/2011/04/27/…

Answer 6

La solución dada a @Shanison ayuda solo parcialmente, pero el problema persiste si hay espacios entre cualquiera de los otros elementos que pueden ser parte del modelo de contenido de tabla como thead, th, etc.

Aquí hay una mejor expresión regular ideada por mi líder en el trabajo.

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

cubriendo todos los elementos table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Nota: jQuery.browser se eliminó en jQuery 1.9 y solo está disponible a través del complemento jQuery.migrate. Intente utilizar detección de características en su lugar.

Answer 7

Solucioné este problema eliminando el espacio en blanco:

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 8

También me encontré con este problema y me di cuenta de que sucedía cuando colocaba texto directamente en elementos <td> . No estoy seguro de si es un estándar o no, pero después de ajustar cualquier texto en los elementos <span> , los problemas de representación desaparecieron.

Entonces, en lugar de:

<td>gibberish</td>

tratar:

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

Answer 9

Tener el mismo problema de formato con ie9, y un nuevo problema en ie11 donde se formatea correctamente, pero toma de 25 a 40 segundos generar una tabla de aproximadamente 400 filas y 9 columnas. Tiene la misma causa, espacios en blanco dentro de las etiquetas tr o td.

Estoy mostrando una tabla que se crea mediante la representación de una vista parcial desde una llamada AJAX. Decidí BFH en el servidor eliminando los espacios en blanco de la vista parcial procesada, utilizando un método publicado aquí: http://optimizeasp.net/remove-whitespace-from-html

Esta es su solución copiada 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();

    }

Y aquí hay un método que devuelve una vista parcial como una cadena, robada de otra respuesta 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
        }
    }

Se necesita un poco de tiempo, pero menos de un segundo para generar una tabla de aproximadamente 400 filas, lo que para mi propósito es lo suficientemente bueno.

Answer 10

Tengo exactamente el mismo problema también. es posible que desee leer esto https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Puede eliminar el espacio entre td utilizando javascript si su html es devuelto desde ajax, luego de la respuesta, lo reemplaza con

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

Answer 11

Tuve el mismo problema al rellenar una tabla usando plantillas jquery. Seguí teniendo ''fantasma'' <td> ''s en conjuntos de datos más grandes (300+) solo en IE9. Estos <td> ''empujarían las columnas exteriores fuera de los límites de mi mesa.

Arreglé esto haciendo algo realmente tonto; eliminando todos los espacios entre las etiquetas de inicio y finalización de <td> y justificando el marcado HTML correspondiente a mi tabla. Básicamente, desea que todos sus <td> </td> en la misma línea, sin espacios.

Ejemplo:

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

Answer 12

Tuve el mismo problema con la red KendoUI en IE10. Pude obligar a IE a reparar las celdas de la tabla que faltan con este truco:

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

Agregar un textNode vacío hace que IE renueve toda la tabla.

Answer 13

Tuve un problema similar con ie-9 cuando renderice la tabla dinámica.

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

cuando se traduce se traduce a ...

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

esto funciona perfectamente bien en ie = 10 safari de cromo ...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

necesitas escribir 100px lugar de 100 .

Answer 14

Yo también estaba teniendo ese problema.

Se me ocurrió que ese atributo de ancho en las etiquetas td / th causaba este problema.

Se cambió a style = "width: XXpx" y el problema se resuelve :)