1

左边是 chrome，右边是 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;
}
4

2 回答 2

2

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

对于相同类型，PNG 通常会产生比 GIF 文件大小更小的文件更好看的图像...更多

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

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

<img src="http://i.stack.imgur.com/xbEug.png" height="40"><a id="logout" href="/viewer/logout">Logout</a>
于 2013-04-03T19:24:57.103 回答
0

对此的简单回答是你不能。IE几乎在所有方面都只是一个劣质浏览器，它表现得越来越多，从图像渲染到调试，再到对css的支持，应有尽有。

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

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

于 2013-04-10T21:38:49.277 回答