代码之家 › 专栏 › 技术社区 › Roger Lipscombe

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

png internet-explorer-7 css html

Roger Lipscombe · 技术社区 · 15 年前

我正在尝试在我的网页(xhtml 1.0 transitional)上显示徽标(png在paint.net中创建),如下所示:

<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。

4 回复 | 直到 10 年前

easwee 15 年前

如果是浮球:是的,那就把它弄乱了,也许你应该试着清理浮球。尝试设置溢出:hidden;on.header类,或在标记中跟随它的元素上应用clear:both。

此外,img标记始终需要alt属性-但是可以将其留空-alt=“”

Richard Ev 15 年前

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

如果是这样,那么问题不在于图像,而在于HTML或CSS。

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

逐个删除CSS样式,直到图像在所有目标浏览器中呈现为止。那应该告诉你什么导致问题的原因(希望是 为什么 然后将相对容易理解)

dalle 15 年前

HTML还是XHTML?不要认为自动关闭的img标记在HTML中有效。

编辑:您还缺少alt属性。

Community Mohan Dere 8 年前

我在一个MVC.NET应用程序中遇到了这个问题,它使用了一个带有src=data字符串的img标记。

在一天结束的时候,我不在乎是什么导致了它,因为它是6万张照片中的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);

虽然我觉得奇怪的是,只有特定的记录才会导致显示:none属性被内联应用,但是我很乐意共享它,因为css显示:none不是来自我的代码。

从理论上讲,在使用下面的代码片段运行此代码之前,您可以检查它是否是IE check for IE browser