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（和谷歌浏览器）上，图像显示正确。在IE7上，图像根本不显示。我做错了什么？

我不关心IE6。

Answer 1

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

如果是，那么问题不在于图片，而在于您的HTML或CSS。

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

逐个删除CSS样式，直到所有目标浏览器中的图像呈现为止。这应该告诉你导致问题的原因（希望为什么会相对容易理解的原因）

Answer 2

HTML还是XHTML？不要认为自动关闭的img-tag在HTML中有效。

编辑：您也缺少alt属性。

Answer 3

如果它是漂浮物：右边会弄乱它，你应该尝试清除漂浮物。尝试设置溢出：隐藏;在.header类上，或者在标记中跟随它的元素上应用clear：

此外，img标签始终需要alt属性 - 但您可以将其留空 - alt =“”

Answer 4

我在使用带有src =数据字符串的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显示：无来自我的代码。

无论如何，从理论上讲，您可以在使用check for IE browser

中的代码段运行此代码之前检查是否是IE浏览器

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

4 个答案: