Понимание рендеринга браузера «quirk»

Question

Посмотрите на это fiddle.

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

• ДИВ является 500px ширины
• Изображения внутри центрируются с помощью CSS (маржа: 0 авто)
• Изображения имеет якорь тег обертку вокруг него (нет CSS)

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

Вопросы:

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

Answer 1

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

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

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

Answer 2

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

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