Понимание браузером рендеринга "причуды"

Question

Взгляните на эту скрипку .

Краткая информация:

• Ширина составляет 500 пикселей
• Изображение внутри него центрируется с помощью css (поле: 0 авто)
• На изображении есть обёртка тега привязки (без CSS)

Проблема:
Если вы осмотрите тег привязки (firebug или другой инспектор), он будет иметь ту же ширину и высоту, что и изображение, что для меня правильно, НО полный div можно кликнуть.

Вопросы:

• Firebug показывает неправильный размер тега привязки?
• Браузеры не правы? (Я полагаю, нет)
• Что происходит? :)

Answer 1

Я подозреваю, что это потому, что имеет стиль display:block.Это означает, что элемент (!) (В отличие от самого графического изображения) будет расширяться для заполнения любой ширины, выделенной ему.Обратите внимание, что когда вы удаляете параметр display:block, интерактивная область возвращается к размеру изображения, как и ожидалось.

Тогда возникает вопрос: как вы центрируете связанное изображение, ограничивая интерактивную областьобраз?Один из способов:

div { width: 500px; text-align:center; }

Answer 2

Якорная метка как вокруг изображения. У изображения есть запас. auto не равен 0, это разница между 500 и шириной изображения / 2.

Если вы не хотите включать поле, оберните изображение и закрепите его в элементе div, поместите его с полем: 0 auto;