Internet Explorer 9 no representa correctamente las celdas de la tabla


115

Mi sitio web siempre ha funcionado 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 muestran 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í aparece solo en algunas actualizaciones, no en todas).

Usando la herramienta F12 de IE, la estructura de la tabla parece correcta, no debería haber ningún TD vacío después del TD que contiene M08000007448, pero aún así se renderiza así.

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

Tengo este problema de representación de tablas también en alguna otra tabla de la aplicación, ¿alguien está experimentando 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 complemento JS.

Traté de guardar la página (con imágenes) y abrirla en local con IE9, pero el problema nunca ocurre. (Por supuesto, verifiqué 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 sea necesario).


algun codigo? tal vez tienes una etiqueta que no coincide en alguna parte?
Naftali alias Neal

¿Puede validar el HTML con las herramientas IE9 F12? ¿IE9 te dice en qué modo se está renderizando? Modo Quirks, IE 7, IE 8, estándares IE 9 (predeterminado), etc ...
Dan Sorensen

IE Blog menciona una nueva herramienta hoy para ayudar a solucionar problemas de incompatibilidad de IE 9: blogs.msdn.com/b/ie/archive/2011/04/27/…
Dan Sorensen

El código es muy largo, no creo que el problema esté ahí. No se encontró ningún error con la herramienta F12 y el modo de renderizado es IE9. Probé el inspector de Compat y te lo hice saber;) También verifiqué los errores de etiqueta (lo primero que hice) pero no
tuve

Por cierto, encontré el problema: parece que algún código javascript antes de la etiqueta HEAD estaba causando el problema. IE9 no parece manejarlo bien, ... es un problema ya que tuve un problema con MVC al hacerlo así ... Estoy de vuelta con el anterior :) Gracias a todos.
fgpx78

Respuestas:


72

ingrese la descripción de la imagen aquíTambién tengo exactamente el mismo problema. es posible que desee leer este https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Puede eliminar el espacio entre td usando javascript si su html se devuelve desde ajax, luego, desde la respuesta, lo reemplaza con

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

Esta solución solucionó mi problema. Me dio un acertijo tranquilo antes de encontrar esta solución.
Bearwulf

El enlace ya no está disponible.
Mason240

Todavía está disponible. Debe iniciar sesión para ver el contenido. Solo tomé capturas de pantalla. Puede encontrar la captura de pantalla en mi respuesta
Shanison

También agregué & nbsp; a las celdas vacías.
Bakudan

¿Qué
pasa

33

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

Arreglé esto haciendo algo realmente tonto; eliminando todos los espacios entre el<td> etiquetas de inicio y final y justificando a la izquierda el marcado HTML correspondiente a mi tabla. Básicamente, desea que todos estén <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>

Gracias, lo intentaré si el problema vuelve a ocurrir. Sin embargo, me alegra saber que no soy el único que lo tiene;)
fgpx78

4
¿Qué? (esta fue mi primera reacción). ¡Pero funcionó! Muchas gracias!
Filipa Lacerda

1
Trabajó para mí ¡Muchas gracias! +1 para ti
Saurabh Bayani

¡Señor, es increíble! :-)
Satya

muchas gracias por esto! La eliminación de todos los espacios entre las etiquetas de inicio y finalización <td> funcionó de hecho.
Frankie Loscavio

14

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 la tabla como thead, th, etc.

Aquí hay una expresión regular mejor diseñada 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. En su lugar, intente utilizar la detección de funciones.


11

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

2

IE Blog menciona una nueva herramienta hoy llamada el script Compat Inspector para ayudar a solucionar problemas de incompatibilidad de renderizado de IE 9. Puede ayudar a solucionar su problema.

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


No se pudo encontrar nada con la herramienta. Solo un gran problema de validación, todo debido a la representación del motor aspnet (falta el final / para algunas etiquetas meta y de enlace en el encabezado).
fgpx78

2

Yo también estaba teniendo ese problema.

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

Lo cambié a style = "width: XXpx" y el problema está resuelto :)


2

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

Entonces en lugar de:

<td>gibberish</td>

tratar:

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

Me gusta esta solucion Es más sencillo que eliminar los espacios en blanco entre todos los elementos. Además, funcionó para mí :-)
R. Schreurs

2

Encontré un script muy útil para evitar celdas no deseadas en su tabla html mientras se renderiza.

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)


1

Respuesta tardía, 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 vez de

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

Tenía que hacer

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

¡Esto pareció resolver el problema!


0

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


0

Tuve un problema similar con ie-9 al renderizar una tabla dinámica.

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

cuando se renderiza se traduce en ...

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

esto funciona perfectamente bien en 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>

necesitas escribir en 100pxlugar de 100.


0

Tiene el mismo problema de formato con ie9, y un nuevo problema en ie11 donde se formatea correctamente pero tarda entre 25 y 40 segundos en representar 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 de una llamada AJAX. Decidí BFH en el servidor eliminando el espacio en blanco de la vista parcial renderizada, usando 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 renderizar una tabla de aproximadamente 400 filas, lo que para mis propósitos es suficientemente bueno.


0

A veces tuve este problema en 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;
}

-1

Tuve el mismo problema con la cuadrícula KendoUI en IE10. Pude obligar a IE a volver a procesar las celdas de la tabla que faltaban con este truco:

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

Agregar un textNode vacío hace que IE vuelva a renderizar toda la tabla.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.