PNG图片出现在IE8中，消失在IE7中

Question

我试图在我的网页（XHTML 1.0 Transitional）上显示徽标（在Paint.NET中创建的PNG），如下所示：

<body>
  <div class="header">
    <div class="logo">
      <img src="logo.png" />
    </div>
  <!-- etc. -->

.header的样式如下：

.header {
  background-color: Black;
  color: White;
  margin-left: -3em;
  padding-top: 12px;
  padding-left: 2em;
  padding-bottom: 12px;
  font-size: 1.4em;
}

.header .logo {
  float: right;
}

徽标为黑底白字，并带有其他颜色。

在IE8（和Google Chrome）上，图像正确显示。 在IE7上，图像完全不显示。 我究竟做错了什么？

我不在乎IE6。

Answer 1

如果将图像直接拖放到IE7中，是否可以正确显示？

如果是这样，那么问题就不在于图像，而在于您的HTML或CSS。

我这里没有IE7，因此无法直接测试，但是我可以推荐一种简单的故障排除方法：

• 逐步删除CSS样式，直到图像在所有目标浏览器中呈现。 这应该告诉你是什么原因造成的问题（有希望的理由，那么为什么会比较容易捉摸）

Answer 2

HTML或XHTML？ 不要认为自动关闭的img标签在HTML中有效。

编辑：您还缺少alt属性。

Answer 3

如果是float：right弄乱了提示，则应尝试清除浮动。 尝试设置overflow：hidden; 在.header类上，或者在标记中紧随其后的元素上都应用clear：both。

另外img标签始终需要alt属性-您可以将其保留为空-alt =“”

Answer 4

我在使用带有src = data字符串的IMG标签的MVC.NET应用程序中遇到此问题。

归根结底，我不在乎是什么原因造成的，因为它是60000张图像中的1张（并且仅在IE中）

function showPicture() {
        if ($('#picture').css("display") == "none") {
            $('#picture').css("display", "");
            clearInterval(interval);
        }
    }

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))
        interval = setInterval(showPicture, 500);

虽然我觉得很奇怪，只有某些记录会导致Display：None属性被内联应用，但是我很乐意共享它，因为CSS Display：None不是来自我的代码。

无论如何，理论上，您可以使用check for IE浏览器中的代码段在运行此代码之前检查它是否是IE。