Question

现在已经在这个网站上工作了一段时间，在Mac和PC Firefox以及Safari上都能很好地运行。然而，IE正在使网站几乎空白 - 任何有关正在发生的事情的想法？任何解决方法？

提前感谢您的帮助！

http://www.alliedprintingsolutions.com

http://www.alliedprintingsolutions.com/style.css（样式表）

Answer 1

您的html在很多方面都是invalid。请先解决这个问题。

Answer 2

添加DOCTYPE！

建议使用HTML5或HTML4 严格（不 Transitional）以获得最佳跨浏览器支持。

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

（正如您所看到的，HTML5更加简单，即使您还没有使用HTML5标签，它仍然可以使用。）

注意：DOCTYPE必须是文件中的第一件事，在所有其他标签之前，并且在它之前没有空行，制表符或空格。

Answer 3

您可能想尝试添加doctype。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

编辑：doctype声明应该是html文件中的第一个事物。它甚至之前＆lt; html＆gt;标签

Answer 4

快速解决方案：删除“overflow：auto;”来自#wrapperbig和#wrapper。

这将显示内容。

但是，请务必查看其他答案。他们有好点。

Answer 5

我也遇到了同样的问题，经过一些研究后找到了解决方案。

不要在HTML文件上编码CSS
制作单独的CS文件并使用<link rel="stylesheet" href="css/style.css">
始终将<!DOCTYPE>标记添加到每个HTML网页//这是主要解决方案

Answer 6

我现在没有FireBug（如果你没有这个扩展程序 - 得到它！）但是现在使用图像就是问题了。

使用CSS为网站的主要内容应用“背景图片”属性。例如：

<style>
.Page
{
    background-image : url(../images/site_bg.png) no-repeat;
    width : 600px; /* Image width here */
    heigth : 500px; /* Image height here */
    padding-top : 15px; /* top text offset here */
    padding-left : 15px; /* left text offset here */
    padding-right : 15px; /* right text offset here */
    padding-bottom : 15px; /* bottom text offset here */
}
</style>

...

<div class = "Page">
 <!-- Content -->
</div>

这将更好用，并且可以在所有浏览器中正常工作：）

回复评论

我不想说错了，但是当我可以用鼠标光标点击并拖动背景图片时，这意味着您正在使用IMG标签来显示背景而不是（或与之结合）背景-image属性。我几乎可以知道那是你的问题。删除所有img标签并将其替换为div和背景图像样式，您的问题将得到解决。

如果我对我有萤火虫，我可以进一步详细说明。

使用示例代码进行第二次编辑

这是一些粗略的代码，可以帮助您删除不必要的图像使用。

<style>
    .Container { margin : auto; width : 600px; /* BG and Header Width here */ }

    .Header
    {
        background-image : url(../images/site_header.png) no-repeat;
        width : 600px; /* Image width here */
        heigth : 500px; /* Image height here */
        padding-top : 15px; /* top text offset here */
        padding-left : 15px; /* left text offset here */
        padding-right : 15px; /* right text offset here */
        padding-bottom : 15px; /* bottom text offset here */
    }

    .Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
    {
        width : 60px;
        heigth : 60px;
        display : block;
        float : left;
        margin : 10 20px;
    }

    .Header .Link1:link, .Header .Link1:visited
    {
        background-image : url(../images/link1.jpg);
    }

    .Header .Link2:link, .Header .Link2:visited
    {
        background-image : url(../images/link2.jpg);
    }

    .Page
    {
        background-image : url(../images/site_bg.png) no-repeat;
        width : 600px; /* Image width here */
        heigth : 500px; /* Image height here */
        padding-top : 15px; /* top text offset here */
        padding-left : 15px; /* left text offset here */
        padding-right : 15px; /* right text offset here */
        padding-bottom : 15px; /* bottom text offset here */
    }
</style>

...

<div class = "Container">
  <div class = "Header">
    <a href = "link1" id = "Link1"></a>
    <a href = "link2" id = "Link2"></a>
  </div>
  <div class = "Page">
    Content
  </div>
</div>

：）

Answer 7

快速浏览一下firebug中的代码。你似乎在内容div（#wrapperbig）上有一个-1的z-index，浏览器应该忽略非绝对/相对内容 - 这可能是IE中的一个奇怪的实现。

另外，如前所述，添加doctype - 如果没有doctype，IE将以'怪癖模式'呈现网站。

Answer 8

对于content_left和content_right的绝对定位，发生了太多的事情。删除“position：absolute”并将其替换为两个内容中的“float：left”（将包装器宽度设置为100％）即可。

Answer 9

感谢大家的所有建议。现在大部分内容都在IE上显示（相对应该如此），除了以粗略的方式切割我的页面的页脚（哈哈）。我看到你在说什么，Nelson LaQuet，关于标题图片，我将不得不尝试和它们一起玩，我还是CSS的新手，并且想要将它们全部正确地放置在图像地图上是令人头痛的，因为。至于Doctype，我在你告诉我的时候添加了它，它似乎甚至在Firefox上搞砸了一些内容，所以我知道我必须要经历更多的错误。当我删除它时，事情看起来很正常。具有绝对定位的“woowoo”非常必要，因为所使用的定位方法是我能找到的唯一方式，可以使用背景图像和标题图像，并且列div位于正确的位置。至少我做了一些积极的进展，但我想我还有更多工作要做：/只是希望它更容易纠正，因为它在Firefox中看起来很好。哦，再次感谢你的帮助，伙计们！

香农

Answer 10

有时甚至在添加

之后

<!DOCTYPE html>

未加载Css。

这是因为

之前有空格

  <!DOCTYPE html>

确保它不存在。

在IE浏览器中，页面将显示

Answer 11

之前不只是空格：

    <!DOCTYPE html>

但也要在样式表（CSS文件）中的花括号之前删除空格。简单样式表的示例（假设它位于文本编辑器的左边距）：

    h1{
     font-family:Arial;
     color:purple;
    }

CSS无法在IE中运行？

11 个答案: