图像在Chrome和IE中的显示方式不同

Question

新手网络开发者在这里！我在导航栏中嵌入了一个徽标，在Chrome和运行文档标准的IE 10中显示不同。该页面正在运行bootstrap CSS。代码如下：

<div class="masthead">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
           <li><img class="" src="img/logo.png" style="height: 50px;"></li> 
                    <li><a href="team.htm">Team</a></li>
                    <li><a href="index.htm">Mission</a></li>
                    <li><a href="charity.htm">Charity</a></li>
                    <li class="active"><a href="#">Events</a></li>
                    <li><a href="past.htm">Past</a></li>
                    <li><a href="talk.htm">Contact</a></li>
                    <li><a href="gallery.htm">Gallery</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /.navbar -->
</div>

在IE中输出是预期的，就像这样（忽略黑盒子，那是我审查我的雇主）：

在Chrome中，它看起来像这样：

bootstrap.css和列表下的图片的CSS如下：

img {
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic; }

li {
    line-height: 20px;
}

有谁知道我做错了什么？

编辑：根据多个建议尝试说明宽度，我输入“width：100px;”在html代码中的'height'之后。图像在IE10中正确调整大小，但在chrome上最大为64px。查看Computed Style显示：

Answer 1

尝试提供如下图像尺寸属性：

<img src="img/logo.png" height="50" width="100">

高度和宽度应该是图像的高度和宽度

Answer 2

尝试更改图像宽度，因为100％可能会有所帮助。

尝试改变这样的风格。

width:100%;
background-size:100%;

Answer 3

尝试使用：

img
{
 width: auto;
 height: auto;
 vertical-align: middle;
 border: 0;
 -ms-interpolation-mode: bicubic;
}

而不是：

img {
width: auto;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}