PNG img 在 Visual Studio Designer 中显示，但在 IE 中不显示

Question

我目前正在编写网页。我希望网页顶部有一个横幅图片。这是我的 html 和 css:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Protect The Environment!</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div>
        <img src="http://intranet.kings.edu.hk/~s13977/banner.png"
            id="banner-image" 
            alt=""/>

    </div>
</body>
</html>

styles.css

body {
    background:#f8e4e4;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:medium;
}

#banner-image {
    height: 106px; 
    width: 582px;
}

如您所见，我确实将图像放入html 并且src 设置为正确的url。您可以复制 url 并检查。这是 Visual Studio Designer 的外观：

但是当我用 IE 运行它时，它看起来像这样：

我试图将其添加到 #banner-image css 规则中：

visibility:visible;

但它根本不起作用。页面保持不变！

我认为 div 有一些问题，但我真的很想保留它。它只是让事情更容易管理。

Answer 1

在我的测试中，我没有发现 HTML 排序有任何差异，尽管我不是很彻底。直接在图像上或周围添加一个浮动 class 没有区别 <div> 没有区别，图像仍然没有显示。
幸运的是，修复非常简单！只需在 CSS 中添加三行。文件，问题就解决了。

没有 hack，没有条件，只是纯粹的，验证 CSS。

img
{
    position: relative;
}

尽管我曾因处理 Internet Explorer 的不足之处而头疼不已，但当我意识到解决方案是多么简单时，这真是一记耳光。相对 定位是 IE 中的神奇修复，所以如果您有一些奇怪的怪癖让您感到悲伤，请尝试一下！

注意：测试和工作正常

Answer 2

Internet Explorer 无法识别换行符，因为 IE 不进行自动编码。意思是代替：

"http://intranet.kings.edu.hk/~s13977/banner.png"

在 IE 上的图像路径中，您将得到：

  "http://intranet.kings.edu.hk/%7Es13977/banner.png"

%7E是~的url编码，会导致你的图片路径不存在。

您需要为您的 link 使用 encodeUriComponent 或其他一些显式编码组件才能使其在 IE 上运行。

PNG img 在 Visual Studio Designer 中显示，但在 IE 中不显示

PNG img displays in Visual Studio Designer but not IE

internet-explorer

png

visual-studio-designer