Errore di IE con le tabelle e gli spazi bianchi di TD?

Question

Ho una pagina che sta usando tabelle, in FF ecc funziona perfettamente, ma in IE7 causa problemi, è fondamentalmente dove i quattro angoli hanno un td e e img (è un angolo arrotondato) .. se rimuovo il whitespace dal documento risolve il problema .. Quello che succede in realtà è che rovina i tavoli .. mette una sottile linea bianca tra il tr superiore che contiene i 2 angoli e il successivo tr

Ho bisogno di rimuovere il lo spazio bianco tra l'IMG e il TD, c'è un lavoro meglio intorno, come ho un sacco e non solo che se riformattare il documento, il problema si ripresenta ..

Ecco un semplice esempio ..

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

come potete vedere non v'è spazio bianco tra img e td ... e io rimuoverlo in modo che assomiglia a questo:

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

il problema è andato, (si noti il ​​TD e l'immagine sono proprio accanto gli uni agli altri)

tutte le idee, ho provato a installare tutti i tipi di css, imbottitura 0px, i margini 0px ecc ...

tutte le idee molto apprezzato.

Answer 1

L'unico modo per "risolverlo" (e io uso questo termine liberamente) è remove the whitespace.

Ancora più importante, si dovrebbe smettere di fare siti web come se fosse il 2001. :)

Answer 2

IE dichiara che v'è contenuto del testo all'interno del TD (altro che l'immagine), in modo che gli conferisce il suo testo line-height. Prova a impostare un height e overflow: hidden per i TD.

Answer 3

È stato così per tutto il tempo che posso ricordare, tutte le versioni.

Per quanto mi riguarda, non ho mai trovato un modo diverso dal mettere l'immagine e il td sulla stessa riga, ma non ho mai veramente guardato - potrebbe esserci un modo che mi è sfuggito. Credo di aver preso l'abitudine di renderli più efficienti.

Answer 4

Come si è visto, rimuovendo gli spazi bianchi non è l'unico modo per risolvere il problema. Probabilmente tutti gli altri lo hanno già capito, ma ho pensato di aggiungerlo qui per completezza alla prossima povera anima che si imbatte in questo fastidioso problema.

Fondamentalmente, non devi preoccuparti degli spazi bianchi nel tuo markup. Invece, aggiungi style = "display: block;" al tag img. Poiché le immagini sono elementi in linea e hai margini bianchi nella marcatura, IE aggiunge gli spazi bianchi extra alla parte inferiore della cella per tenere conto della possibilità di testo con i decantatori (ad esempio g, y, p, ecc.). L'impostazione del tag img da visualizzare come elemento di blocco si occupa di questo. Niente più brutti spazi bianchi!

Il credito va a questo ragazzo: http://blog.wheelerstreet.com/ie-white-space-issue-with-td-and-img-solved, che è dove ho trovato la risposta. Credo che l'abbia preso da un gruppo di discussione di google o da un altro.

Spero che questo aiuti!

Answer 5

Ho risolto l'aggiunta di questa prima della fine del tavolo:

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

Spero che questo aiuto.

Answer 6

Ho provato tutte le soluzioni sopra indicate:

a) provato il display: block

b) rimosso spazi bianchi nei tag td (per esempio I usato tr e td tag senza spazio bianco trascorre loro)

.

c) ho provato ad utilizzare:

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

Soluzione a) ha funzionato. Le soluzioni b) ec) non hanno funzionato su IE.

ma la soluzione migliore che ho trovato è questo:

Aggiungi un attributo hspace=0 al tag immagine. Ad esempio:

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

Questo è il trucco.

Answer 7

Altro (e la migliore :)) soluzione è:

1. impostare il TD larghezza/altezza all'immagine larghezza/altezza con i CSS
immagine
2. insieme allo sfondo per il td

Come:

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

funziona me formare :)

(mi dispiace per il mio inglese: ">)

Answer 8

Un'altra risposta tardiva, ma è possibile utilizzare anche line-height: 0; per rimuovere lo spazio vuoto. Per garantire che il testo sia ancora leggibile, è possibile racchiuderlo in un altro elemento e utilizzare line-height: normal o un altro valore di propria scelta.

td * { line-height: normal; } 

Answer 9

Questo mi ha spinto noci per un po '- si spostano da IE 8.0 a IE 9.0 in siti Intranet - tutte le immagini improvvisamente avuto un po' di spazio bianco sotto di loro.

Impostazione display: blocco sulle immagini ha fatto per me.

Answer 10

ho avuto questo problema anche con un sito Intranet in Internet Explorer, quindi ho spento la modalità di visualizzazione di compatibilità per siti Intranet per risolvere il problema: