谷歌浏览器中百分比高度的问题

Question

为什么Google Chrome设置为百分比时，会将图像保留为原始高度？ （如果我将其设置为像素，则显示为右） 在页面上的IE图像看起来正确，但在铬合金，他们伸展他们的宽度，但不是他们的高度！ 编辑：

<div id="Main_NewsBox">
        <span style="display:inline-block;color:White;background-color:Black;height:20%;width:98%;margin:1%;">
          <div style="width:99%;height:98%;margin-top:1%;margin-bottom:1%;margin-  right:1%;;background-color:Color [Black];color:Color [White];margin-bottom:10px;clear:both;position:relative;top:-21px">
            <div style="float:left;width:15%; height:100%"><img style="width:90%;height:95%" alt="" src="Image.png"></div>
            <h1 align="left">Title</h1>
            <div align="right">date</div>
            <div style="word-wrap:break-word" align="left">text</div>
          </div>
        </span>
</div>

这里的示例，这是我想要在我的网站上的“新闻”，这是Chrome显示的html（在asp.net中这是一个Web控件）。 为什么chrome以高度显示图像，而在IE中显示它应该是div的高度？