PNG img 显示在 Visual Studio 设计器中，但不显示在 IE 中答案

【问题标题】：PNG img displays in Visual Studio Designer but not IEPNG img 显示在 Visual Studio 设计器中，但不显示在 IE 中
【发布时间】：2015-08-03 06:28:28
【问题描述】：

我目前正在写一个网页。我希望在网页顶部有一个横幅图像。这是我的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。您可以复制网址并检查。下面是它在 Visual Studio 设计器中的外观：

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

我尝试将此添加到#banner-image css 规则：

visibility:visible;

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

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

【问题讨论】：

你试过在其他浏览器上运行它吗？如果有，结果如何？
可能是IE对img标签内的换行符不友好。
如果你想认真开发网页，你必须学习如何在浏览器中使用开发者工具。一旦你这样做了，你就不必问这样的问题（或者至少会问更好的问题）
@Boaz 我删除了新行，还是一样。
您说我们可以检查图像 URL。它不适合我。

标签： internet-explorer png visual-studio-designer

【解决方案1】：

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

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

img
{
    position: relative;
}

虽然我因处理 Internet Explorer 的不足之处而头疼不已，但当我意识到解决方案多么简单时，这简直是一记耳光。相对定位是 IE 中的神奇修复，所以如果你有一些奇怪的怪癖让你很伤心，那就试试吧！

注意：经过测试并运行良好

【讨论】：

哦，是的！我以前真的很喜欢IE。但现在？没那么多。
是的，这是 IE 中的魔术，但如果您的位置需要固定，会发生什么？或者由于要求不能是相对的？这是伤口上的绷带。
@BarrJ 感谢您提供额外的提示。但是position: relative; 不会对查看造成任何伤害。

【解决方案2】：

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

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

在 IE 上的图片路径中你会得到：

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

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

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

【讨论】：