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设置为正确的网址。您可以复制网址并进行检查。以下是Visual Studio Designer的外观：

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

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

visibility:visible;

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

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

Answer 1

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

没有黑客攻击，没有条件限制，只是纯粹的，验证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编码，这将导致图像的路径不存在。

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

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

2 个答案: