Tabellenzellen sind größer als vorgesehen

StackOverflow https://stackoverflow.com/questions/22000

  •  09-06-2019
  •  | 
  •  

Frage

Ich habe ein Kartensystem für ein Spiel erstellt, das auf dem Prinzip basiert, das Bild der Karte aus Kacheln zu zeichnen.Dafür gibt es viele Gründe, auf die ich hier nicht näher eingehen werde, aber wenn Sie es wirklich wissen wollen, finden Sie sicher heraus, wie Sie mich kontaktieren können ;)

Ich habe Habe die neueste Version live gemacht So können Sie genau erkennen, wo das Problem liegt und woher es stammt.Das Problem ist die Linie zwischen den beiden oberen und den beiden unteren Kacheln. Ich kann nicht herausfinden, warum das so ist, und wäre für jede Hilfe dankbar.

In der Quelle befindet sich eine Markierung namens „stackoverflow“. Wenn Sie beim Anzeigen der Quelle nach „stackoverflow“ suchen, sollten Sie zur betreffenden Tabelle gelangen.

Ich habe auch eine hochgeladen Bild des Problems.

War es hilfreich?

Lösung

Ich denke, Sie müssen verwenden display: block auf Ihren Bildern.Wenn Bilder sind inline Es gibt etwas mehr Platz für den Zeilenabstand.

Andere Tipps

Sie können auch die Zeilenhöhe des td-Elements anpassen:

td {
    line-height: 0
}

Ich weiß, das hört sich vielleicht schlecht an, aber Sie müssen sicherstellen, dass zwischen Ihrem Ende kein Leerzeichen steht <img> Tag und der Anfang vom Ende </td> Etikett.

d.h.Folgendes stellt das Problem dar:

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

Und das wird nicht:

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

Hoffentlich hilft das.

Bearbeiten:OK, das war überhaupt nicht die Lösung.doh!

Ich habe nicht alles nachgeschlagen, aber das Problem liegt irgendwo in den Stylesheets.

Wenn Sie nur den Tabellenteil davon kopieren, wird die Karte korrekt angezeigt.

Wenn Sie das Finale entfernen </span> Tag aus diesem Teil, es funktioniert auch (allerdings wird die Seite gemischt):

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

Versuchen Sie es also entweder von Anfang an mit dem CSS oder versuchen Sie, sie einzeln zu entfernen, um herauszufinden, was das Problem verursacht.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top