¿Error de IE con las tablas y el espacio en blanco de TD?

Tengo una página que está usando tablas, en FF etc. funciona perfecto, pero en IE7 causa problemas, es básicamente donde las cuatro esquinas tienen un td yy img (es una forma de esquina redondeada) ... si elimino el espacio en blanco del documento que soluciona el problema ... Lo que realmente sucede es que arruina las tablas ... pone una delgada línea blanca entre el tr superior que contiene las 2 esquinas y el siguiente tr¿Error de IE con las tablas y el espacio en blanco de TD?

Necesito eliminar el el espacio en blanco entre el img y el TD, ¿hay un mejor trabajo en torno, ya que tengo un montón y no solo eso si formatear el documento el problema vuelve ..

Aquí está un ejemplo sencillo ..

<table width="100%" height="418" border="0" cellpadding="0" cellspacing="0" bgcolor="#F04A23" 
      style="margin: 0px; padding: 0px"> 
      <tr> 
       <td width="12" align="left" valign="top"> 
        <img src="content/images/corner_left.gif" width="12" height="12" /> 
       </td>

como se puede ver que hay un espacio en blanco entre IMG y td ... y me lo quita por lo que se ve así:

<img src="content/images/corner_left.gif" width="12" height="12" /></td>

el problema se ha ido, (nótese el TD y la imagen están al alcance el uno al otro)

Cualquier idea, he intentado establecer todo tipo de CSS, 0px relleno, márgenes 0px etc ...

todas las ideas muy apreciadas.

Fuente

2009-06-14 mark smith

La única forma de "arreglarlo" (y uso ese término de forma general) es remove the whitespace.

Más importante aún, debe dejar de hacer sitios web como si fuera 2001. :)

Fuente

2009-06-14 19:29:36

sí, fue un sitio web de edición, wouldn' Ha sido mi decisión usar tablas para el diseño ... pero actualmente es todo lo que tengo hasta que lo convierta ... gracias por la reposonse .. –

IE encuentra que hay contenido de texto dentro del TD (que no sea la imagen), por lo que le da su texto line-height. Intente configurar un height y overflow: hidden para los TD.

Fuente

2009-06-14 19:28:38

Ha sido así desde que tengo memoria, todas las versiones.

Para mí, nunca he encontrado otra manera de poner la imagen y la td en la misma línea, pero nunca he visto realmente, puede haber una manera que me he perdido. Supongo que acabo de acostumbrarme a racionalizarlos.

Fuente

2009-06-14 19:28:56 Eli

Como resultado, la eliminación de los espacios en blanco no es la única forma de solucionarlo. Probablemente todos los demás ya se hayan dado cuenta de esto, pero pensé que lo agregaría aquí para que esté completo para la próxima pobre alma que tropiece con este molesto problema.

Básicamente, no tiene que preocuparse por el espacio en blanco en su marcado. En su lugar, agregue style = "display: block;" a la etiqueta img Como las imágenes son elementos en línea, y tiene espacio en blanco en su marcado, IE agrega el espacio en blanco adicional al fondo de la celda para tener en cuenta la posibilidad de texto con descenders (por ejemplo, g, y, p, etc.). Establecer la etiqueta img para mostrar como un elemento de bloque se ocupa de esto. ¡No más espacios en blanco feos!

El crédito va para este tipo: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, que es donde encontré la respuesta. Supongo que lo obtuvo de un grupo de discusión de google u otro.

Espero que ayude!

Fuente

2010-03-17 18:48:03

¡Esto es asombroso! ¡Gracias! Ya no es necesario luchar con los espacios en blanco! – tdgtyugdyugdrugdr

he fijado añadiendo esto antes del final de la tabla:

<tr> 
<td height="0"><img src="pixel.gif" width="0" height="0" alt=""></td> 
</tr>

Esperanza esta ayuda.

Fuente

2011-03-01 18:43:40 Federico

I trataron todas las soluciones anteriores:

a) intentó el display: block

b) eliminado espacios en blanco en las etiquetas TD (es decir, utilicé etiquetas tr y td sin espacio en blanco entre medio de ellos)

c) he intentado utilizar:

padding:0px;border-spacing:0px;border-style:none;border-collapse: collapse;margin:0;overflow: hidden;

Solución a) trabajó. Las soluciones b) yc) no funcionaron en IE.

Pero la mejor solución que he encontrado es la siguiente:

Añadir un atributo hspace=0 a la etiqueta de imagen. Por ejemplo:

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" class="ImageHeader" hspace="0" />

Esto hace el truco.

Fuente

2011-04-12 09:11:32 David

Otros (y la mejor :)) solución es:

establezca la td anchura/altura a la imagen anchura/altura con css
conjunto para el fondo para td

Al igual que

<td style='width: 12px; height: 12px; background: url(corner-left.gif) no-repeat;'></td>

funciona mí formar :)

(perdón por mi inglés: ">)

Fuente

2011-05-13 14:40:10 Briganti

Otra respuesta tardía, pero también podría usar line-height: 0; para eliminar el espacio en blanco. Para asegurarse de que el texto siga siendo legible, puede envolverlo en otro elemento y usar line-height: normal u otro valor de su elección.

td * { line-height: normal; }

Fuente

2011-08-03 11:18:24 Fre

Esto me llevó frutos secos por un tiempo - pasando de 8,0 a IE IE 9.0 en sitios de intranet - todas las imágenes de repente tenía un poco de espacio en blanco debajo de ellos.

Pantalla de configuración: el bloque en las imágenes lo hizo por mí.

Fuente

2013-03-27 13:19:04

tuve este problema también con un sitio de intranet en Internet Explorer, así que apagué el modo de vista de compatibilidad para sitios de intranet para solucionarlo:

Fuente

2017-09-07 05:30:40

¿Error de IE con las tablas y el espacio en blanco de TD?

Respuesta

Cuestiones relacionadas