javascript - 图像在 Chrome 和 IE 中显示不同

Question

网络开发新手在这里!我在导航栏中嵌入了一个 Logo ，它在 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和list如下:

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

li {
    line-height: 20px;
}

有人知道我做错了什么吗？

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

Answer 1

尝试像这样给出图像尺寸属性:

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

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