La tabla IE9 tiene filas aleatorias que están desplazadas en columnas aleatorias

Question

Tengo una página de categorías, cuando el usuario hace clic en una, los elementos de esa categoría se cargan mediante una llamada jQuery Ajax, en una tabla, y se atascan en un elemento debajo de la categoría. Sin embargo, lo que parece suceder es que una o dos filas en la tabla cargada, tendrán su desplazamiento de datos en una columna aleatoria. He probado esto en IE9, FF 3.6 y Chrome 13. Esto SOLO parece suceder en IE9. Los datos tabulares están perfectamente formateados. He usado Fiddler para interceptar las solicitudes y luego he visto el html en bruto, y no hay nada de malo en ello.

El sitio fue construido en ASP.NET MVC3. La tabla que se devuelve a través de la solicitud de Ajax devuelve una vista parcial de Razor. Esto tiene que funcionar en IE, lamentablemente. Realmente espero que alguien tenga una explicación para esto.

Aquí hay un ejemplo: Y otro:

EDITAR [25/03/2012]: Esta aplicación ha dejado mis manos, así que soy incapaz de verificar cuál de las respuestas funciona. El enlace que Adam Youngers publicó en http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 parecía tener algunas posibles soluciones. A partir de la experiencia pasada, me gustaría probar estas opciones primero ..

1. < Adición de meta http-equiv = contenido de "X-UA-Compatible" = "IE = 8"/> al elemento de cabecera de la página.
2. Intento de eliminar cualquier espacio en blanco entre las celdas de la tabla. P.ej. "</td > <td>", en lugar de tener la próxima celda en una nueva línea. (Esto me ha causado problemas de espaciado extraños en el pasado)

Answer 1

El problema parece ser el espaciado blanco.

He encontrado esta respuesta en http://social.msdn.microsoft.com/Forums/en-AU/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90

Reemplazar el html que se obtiene de la llamada AJAX utilizando una expresión regular como este.

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); 
tableHtml = tableHtml.replace(expr, '><'); 

Answer 2

que utiliza una respuesta de otro post Remove whitespace and line breaks between HTML elements using jQuery donde había un guión que fue más eficaz que la anterior. Usé el answer para resolverlo, pero lo repetiré para obtener una respuesta completa.

jQuery.fn.htmlClean = function() { 
    this.contents().filter(function() { 
     if (this.nodeType != 3) { 
      $(this).htmlClean(); 
      return false; 
     } 
     else { 
      return !/\S/.test(this.nodeValue); 
     } 
    }).remove(); 
    return this; 
} 

En última instancia, esta es solo una solución provisional y debe ser corregida en IE9/10 por Microsoft.

Answer 3

La solución dada por @Johann Strydom funciona, pero si no quiere tocar cada elemento y solo enfocarse en el modelo de contenido de la tabla.

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

que cubre todos los de mesa, subtítulo, colgroup, col, tbody, thead, tfoot, tr, td, elementos th.

Answer 4

Siguiendo las sugerencias de Krummelz, agregar <meta http-equiv="X-UA-Compatible" content="IE=8" /> hace que el problema desaparezca.

Para mi problema específico, tengo un jquery datepicker y una etiqueta normal que se representa correctamente en IE9 pero después de una llamada jquery ajax se desplazará hacia abajo en los datos. Poner la etiqueta anterior lo arregla por mí. Vale la pena intentarlo. Buena suerte.

Answer 5

El espaciado en blanco también fue mi problema, aunque mi situación era un poco diferente. Este hilo me ayudó a solucionar el problema (Gracias a todos).

Mi tabla estaría bien y al azar agregar una columna de la nada después de una devolución de datos. Aquí está mi código antes y después:

Antes: (tengo unos 10 otras personas que tienen el formato de la misma manera no están causando este problema, pero era éste)

<tr> 
    <th class="width125px th-left-borders"> 
     Intangibles 
    </th> 
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
      CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox> 
    </td> 
</tr> 

Después de: (eliminado la línea roturas que son por lo general muy bien, pero por alguna razón esto estaba causando un problema)

<tr> 
    <th class="width125px th-left-borders">Intangibles</th> 
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
      CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox></td> 
</tr> 

Esperamos que esto ayudará a alguien así.