Komórki tabel większe niż one mają być

Question

Stworzyłem system map do gry, która działa na zasadzie rysowania obrazu mapy z płytek. Jest wiele powodów, dla których nie będę tutaj wchodził, ale jeśli naprawdę chcesz się dowiedzieć, to na pewno możesz się dowiedzieć, jak się ze mną skontaktować;)

Mam made the latest version live, dzięki czemu możesz zobaczyć, gdzie dokładnie problem leży i źródło. Problem polega na tym, że linia między górnymi 2 dachówkami i dolnymi 2 dachówkami nie jest w stanie zrozumieć, dlaczego tak się dzieje i każda pomoc będzie doceniana.

W źródle znajduje się znacznik o nazwie "stackoverflow", jeśli podczas przeglądania źródła zobaczysz słowo "stackoverflow", powinno ono doprowadzić Cię do tabeli.

Dodałem również image of the issue.

Answer 1

Myślę, że musisz użyć display: block na swoich obrazach. Gdy obrazy są inline, jest trochę więcej miejsca na odstępy między wierszami.

Answer 2

Wiem, że to może zabrzmieć źle, ale musisz upewnić się, że nie ma białego spacji między tobą a końcem <img> znacznika i początkiem końcowego znacznika </td>.

tj Poniższa przedstawi problem: Nie będzie

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

oraz:

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

nadzieję, że pomoże.

Edycja: OK, to nie było w ogóle rozwiązanie. doh!

Answer 3

Nie podniosłem całej sprawy, ale problem leży gdzieś w arkuszach stylów.

Jeśli skopiujesz tylko jego część tabelaryczną, wyświetla ona poprawnie mapę.

Jeśli usuniesz końcowy </span> znacznik z tej strony, to pracuje również (jednak strona zostanie zmieszany):

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

Więc albo spróbować od początku z css lub spróbuj usunąć jeden po -jeden je, aby zobaczyć, co jest przyczyną problemu.

Answer 4

Można także regulować wysokość wiersza elementu TD:

td { 
    line-height: 0 
}