Ячейки таблицы, больше, чем, они предназначены, чтобы быть
Самый простой способ вычислить правильное перемещение мыши или позицию перемещения мыши на событии холста - использовать это небольшое уравнение:
canvas.addEventListener('click', event =>
{
let bound = canvas.getBoundingClientRect();
let x = event.clientX - bound.left - canvas.clientLeft;
let y = event.clientY - bound.top - canvas.clientTop;
context.fillRect(x, y, 16, 16);
});
Если холст имеет padding-left или padding-top, вычесть x и y через:
x -= parseFloat(style['padding-left'].replace('px')); y -= parseFloat(style['padding-top'].replace('px'));
4 ответа
Я думаю, что необходимо использовать display: block на Ваших изображениях. Когда изображения inline существует немного дополнительного пространства для межстрочного интервала.
Я знаю, что это могло бы звучать плохим, но необходимо удостовериться, что нет никакого пробела между затем концом Вас <img> тег и запуск конца </td> тег.
т.е. следующее представит проблему:
<td>
<img src="image.jpg"/>
</td>
И это не будет:
<td><img src="image.jpg"/></td>
Надежда, которая помогает.
Править: Хорошо, это не было решением вообще. doh!
Вы могли также регулировать высоту строки td элемента:
td {
line-height: 0
}
Я не искал все это, но проблема заключается где-нибудь в таблицах стилей.
При копировании только части таблицы его это отображает карту правильно.
Если Вы удаляете финал </span> тег от этой части, это также работает (однако, страница смешана):
<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">
Так или попробуйте от начала с CSS или попытки удалить один за другим их, видеть, который вызывает проблему.