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

发布于 2024-08-19 12:17:49 字数 613 浏览 5 评论 0原文

我试图在我的网页（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。

原文

I'm attempting to display a logo (PNG created in Paint.NET) on my web page (XHTML 1.0 Transitional), like this:

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

.header is styled as follows:

.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;
}

The logo is white-on-black, with some other colours.

On IE8 (and Google Chrome), the image is displayed correctly. On IE7, the image is not displayed at all. What am I doing wrong?

I don't care about IE6.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ㄟ。诗瑗 2024-08-26 12:17:49

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

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

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

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

回复收藏 0 原文

情泪▽动烟 2024-08-26 12:17:49

如果是 float:right 弄乱了它，那么您应该尝试清除浮动。尝试设置溢出：隐藏；在 .header 类上，或在标记中紧随其后的元素上应用clear:both。

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

回复收藏 0 原文

南七夏 2024-08-26 12:17:49

HTML 还是 XHTML？不要认为自闭合 img 标签在 HTML 中是有效的。

编辑：您还缺少 alt 属性。

回复收藏 0 原文

倾｀听者〃 2024-08-26 12:17:49

我在使用带有 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 不是来自我的代码。

无论如何，理论上，您可以在运行此代码之前使用检查 IE 浏览器

I have this problem in an MVC.NET application using an IMG tag with a src=data string.

At the end of the day, I don't care what's causing it, since it's 1 image out of 60000 (and only in 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);

While I think it's strange that only certain records cause the Display:None attribute to be applied inline, I'm comfortable with sharing this, since the CSS Display:None is not coming from my code.

At any rate, theoretically, you can check to see if it's IE before running this code using the snippet from check for IE browser

回复收藏 0 原文

~没有更多了~