如何让Internet Explorer更好地显示图像

Question

左边是镀铬，右边是IE9，同样的图像，同样的html，但其中一个看起来像完全废话。如何使IE不搞砸我的图像？

以下是页面中显示的实际图像，如果有帮助

这是html：

<div id="logo-body" class="x-panel-body x-panel-body-default x-panel-body-default" style="height: 80px; width: 950px; left: 0px; top: 0px;">
<img src="/static/img/logo.gif" height="40"><a id="logout" href="/viewer/logout">Logout</a>
<div id="logo-clearEl" class="x-clear" role="presentation">
</div>
</div>

这是img标签的css

#logo-body img {
    margin-top: 20px;
    margin-left: 10px;
}
.x-border-box, .x-border-box * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
fieldset, img {
    border: 0;
}

和父div的css

#logo-body {
  border: none;
}
#logo, #logo-body {
  background-color: #002d56;
  background-image: -moz-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: -webkit-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: -o-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: -ms-radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
  background-image: radial-gradient(50% 50%, cover, #008dc6, #002d56 68%);
}
.x-panel-body-default {
  background: white;
  border-color: #99bce8;
  color: black;
  border-width: 1px;
  border-style: solid;
}
.x-panel-body-default {
  background: white;
  border-color: #99bce8;
  color: black;
  border-width: 1px;
  border-style: solid;
}
.x-panel-body {
  overflow: hidden;
  position: relative;
  font-size: 12px;
}
.x-border-box, .x-border-box * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

Answer 1

它可能是图像本身，您可以尝试将其保存为PNG而不是GIF。

  

相同类型的PNG通常会生成比GIF文件尺寸更小的更好看的图像... More

或者重新创建图像并使用不同的文件格式。像这样：

例如：http://jsfiddle.net/Wy8Y4/8/

<img src="http://i.stack.imgur.com/xbEug.png" height="40"><a id="logout" href="/viewer/logout">Logout</a>

Answer 2

对此的简单回答是你做不到。 IE几乎在所有方面都只是一个劣质的浏览器，它显示越来越多，从图像渲染到调试，到css支持，你都可以命名。

从GIF转换为PNG没有做任何事情，创建一个全新的徽标确实解决了问题，但并没有真正回答这个问题。有一天，IE将不再存在（我希望），我们将不再花费更多时间来弥补其不足，而不是创造整个产品。

对于那些帮助创建IE的人，诅咒你和你所有的后代。