image - 锚 (a) 内的图像 (img) 未正确渲染

Question

我试图了解我做错了什么，我有两个元素，一个没有风格的带有锚的图像。一些锚点如何不覆盖图像区域。

示例：http: //jsfiddle.net/L4ShV/1/

  <a href="javascript:void(0)" id="downloadLink" >
    <img src="http://toonimo.com/testing/clients_tests/somoto/flv_player/images/nlp/free_download_btn.jpg" border="0" style="width: 373px;height: 120px;" />
</a>
<div>
    <h1>a dimantions:</h1>
    width: <span id='width_c'></span><br>
    height: <span id='height_c'></span><br>
    <br>
        when clearly its not possible!
        How can i get the Real height?
</div>

<script>
    var el = document.getElementById('downloadLink');
    document.getElementById('width_c').innerHTML = el.offsetWidth; 
    document.getElementById('height_c').innerHTML = el.offsetHeight;
</script>

这个问题的任何原因或解决方案？

Answer 1

这是锚的正常行为，正如它对块级元素所期望的那样。您可以浮动 a 以覆盖图像。

<a href="javascript:void(0)" id="downloadLink" style="float:left">