Question

我刚刚为我的摄影设计了一个网页。我使用Chrome作为测试浏览器。

但是在IE上打开我的页面，没有任何内容可见。经过一些麻烦后，我把问题分解为我使用的百分比。我在网上搜索解决方案，但一切都是关于微小的变化（与填充和百分比有关）。

这是一个简单的HTML文件，可以在Chrome中完美运行，但不是全部在IE中运行（div是无像素的盒子，由于文本的存在而稍微扩展）。非常感谢您的帮助。如果我无法解决这个问题，我将不得不彻底重新设计我的网站。

<html>
<head>
    <title>A test HTML</title>
    <style type="text/css">
        #currpage
        {
            position: absolute;
            bottom: 18%;
            right: 10%;
            left: 35%;
            top: 15%;
            border:2px solid green;
            z-index: 240;
        }
    </style>
</head>
<body>
    <div id="currpage" style="visibility: visible; opacity: 1;">
        This is just a test.
    </div>
</body>
</html>

Answer 1

您是否尝试过......实际上制作格式正确的HTML文件？

如果没有DOCTYPE，浏览器会以Quirks模式呈现页面。在IE的情况下，它呈现在IE5.5中，它不支持很多现在基本的东西。

将<!DOCTYPE HTML>添加到文件的开头。

编辑：在您使用时，始终包含内容类型<meta>代码（例如<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />以便浏览器知道编码是什么。还考虑添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />以强制IE使用它所拥有的最严格的标准模式。这些模式出现在我的每一个页面上，甚至是空白模板。需要DOCTYPE和Content-Type（如果你想让它实际工作），并且Compatible标头是可选的（我主要使用它来摆脱令人烦恼地接近刷新按钮的兼容模式按钮......）

Answer 2

好吧，我在Mac上，所以我无法检查它，但似乎你的HTML中没有doctype，所以IE可能会遇到麻烦，因为他没有＆＃39;知道如何解析你的代码。

在第一行（甚至在<html> - 标签之前写下以下内容：

<!DOCTYPE html>

这是针对HTML5文档的。

编辑： ....编辑....忘记这一点。

Answer 3

显式设置包含元素的高度和宽度。我的一个旧页面出现了类似的问题（在Firefox和Chrome中工作正常，在IE浏览器中运行得很糟糕）我发现Firefox和Chrome中的内容会自动设置包含元素的尺寸（如果没有明确指定）然后将这些百分比基于这些假设。 IE没有做出这样的假设，因此当它看到百分比时，它基本上说“是35％的什么？”

IE中的CSS百分比完全失败

3 个答案: