Celle della tabella più grandi di quanto dovrebbero essere

Question

Ho creato un sistema di mappe per un gioco che funziona secondo il principio di disegnare l'immagine della mappa dalle tessere.Ci sono molte ragioni per questo che non entrerò qui, ma se vuoi davvero saperlo allora sono sicuro che puoi scoprire come contattarmi ;)

Io ho ha reso disponibile l'ultima versione così puoi vedere esattamente dove si trova il problema e la fonte.Il problema è la linea tra le 2 tessere superiori e le 2 tessere inferiori, non riesco a capire perché sia ​​andata così e qualsiasi aiuto sarebbe apprezzato.

Nella sorgente è presente un indicatore chiamato "stackoverflow", se cerchi "stackoverflow" durante la visualizzazione della sorgente, dovrebbe portarti alla tabella in questione.

Ho anche caricato un immagine del problema.

Answer 1

Penso che tu debba usare display: block sulle tue immaginiQuando le immagini sono inline c'è un po' di spazio in più per l'interlinea.

Answer 2

Puoi anche regolare l'altezza della linea dell'elemento td:

td {
    line-height: 0
}

Answer 3

So che potrebbe sembrare brutto, ma devi assicurarti che non ci siano spazi bianchi tra la fine di te <img> tag e l'inizio della fine </td> etichetta.

cioè.Quanto segue presenterà il problema:

<td>
 <img src="image.jpg"/>
</td>

E questo non lo farà:

<td><img src="image.jpg"/></td>

Spero che aiuti.

Modificare:OK, quella non era affatto la soluzione.doh!

Answer 4

Non ho controllato tutto, ma il problema risiede da qualche parte nei fogli di stile.

Se copi solo la parte della tabella, la mappa verrà visualizzata correttamente.

Se rimuovi il finale </span> tag da questa parte, funziona anche (tuttavia la pagina si mescola):

<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">

<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">

Quindi prova dall'inizio con i CSS o prova a rimuoverli uno per uno, per vedere quale causa il problema.