0

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

索引.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>

样式.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-imagecss 规则中：

visibility:visible;

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

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

4

2 回答 2

1

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

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

img
{
    position: relative;
}

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

注意：经过测试和工作正常

于 2015-08-03T06:37:12.913 回答
0

Internet Explorer doesn't recognize the newline character, because IE doesn't do automated encoding. Meaning that instead of: 

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

In your image path on IE you will get: 

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

%7E is the url encoding of ~, Which will lead to a non-existent path of your image.

You need to use encodeUriComponent, or some other explicit encoding component for your link in order to get it work on IE.

于 2015-08-03T06:39:59.073 回答