html - “A” tag wrapping “IMG” seems incorrect size. (32 * 32px is shown as 38 * 21px) -
the following issued codes (http://jsfiddle.net/dz754deg/1/).
a{ text-decoration: none; }
<a href="#"> <img src="http://lorempixel.com/32/32/"/> </a> <a href="#"> <img src="http://lorempixel.com/32/32/"/> </a>
the result isn’t strange seemingly. if check browser’s built-in developer tools, a
tag has incorrect size. in chrome (latest version), img
tag normal (32 * 32px). a
tag odd (38 * 21px or 32 * 21px).
this image might help:
firefox has same issue. think isn’t browser-specific. how can fix gracefully?
these 2 styles make blocks appear correctly:
a{ display:inline-block; } img{ display:block; }
it’s because of how inline
, block
level elements rendered. can still click on inline
link wrapped around image everywhere image looks if couldn’t.
screenshots rendered in firefox:
Comments
Post a Comment