在这个网站上工作了一段时间，在 Mac 和 PC Firefox 以及 Safari 上都能完美运行。然而，IE 使网站几乎一片空白——关于发生了什么的任何想法？有什么解决方法吗？
提前感谢您的帮助！
【问题讨论】：
标签： css internet-explorer firefox safari
我现在没有 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 标签来显示背景而不是（或与背景结合） -图像属性。我几乎可以肯定那是你的问题。删除所有 img 标签并用 div 和 background-image 样式替换它们，您的问题将得到解决。
如果我身上有萤火虫，我可以更详细地介绍。
使用示例代码进行第二次编辑
这里有一些粗略的代码，可以帮助您删除不必要的图像使用。
<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>
:)
【讨论】：
您的 html 在很多方面都是 invalid。请先解决这个问题。
【讨论】：
您可能想尝试添加文档类型。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
编辑：doctype 声明应该是 html 文件中的 first 东西。它甚至在 标记之前 。
【讨论】：
添加 DOCTYPE！
建议使用 HTML5 或 HTML4 Strict（非过渡）以获得最佳跨浏览器支持。
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
（如您所见，HTML5 更简单，即使您还没有使用 HTML5 标记也仍然可用。）
注意：DOCTYPE 必须是文件中的第一个，在所有其他标记之前，并且之前没有空行、制表符或空格。
【讨论】：
快速浏览了 firebug 中的代码。您似乎在内容 div (#wrapperbig) 上有一个 -1 的 z-index，对于非绝对/相对内容，浏览器应该忽略它 - 这在 IE 中可能是一个奇怪的实现。
此外，如前所述，添加一个 doctype - 如果没有 doctype，IE 将以“怪癖模式”呈现网站。
【讨论】：
快速解决方案：删除“溢出：自动；”来自#wrapperbig 和#wrapper。
这将获得要显示的内容。
但是，请务必查看其他答案。他们有优点。
【讨论】：
在 content_left 和 content_right 的绝对位置上发生了太多的事情。您可以通过删除“位置：绝对”并将其替换为两个内容中的“浮动：左”（将包装宽度设置为 100%）。
【讨论】：
谢谢大家的建议。大部分内容现在都显示在 IE 上（相对应如此），除了页脚以粗俗的方式切割我的页面（哈哈）。我明白你在说什么，Nelson LaQuet，关于标题图像，我将不得不尝试使用它们，我对 CSS 还是很陌生，并且弄清楚将它们全部正确放置在图像映射中是很头疼的.至于 Doctype，我按照您告诉我的添加了它，即使在 Firefox 上它似乎也弄乱了一些内容，所以我知道我必须有更多的错误要处理。当我删除它时，一切看起来又正常了。具有绝对定位的“woowoo's”非常必要，因为使用的定位方法是我能找到的唯一方法来巧妙地处理背景图像和标题图像，并且列 div 位于正确的位置。至少我取得了一些积极的进展，但我想我还有更多的工作要做：/只是希望它更容易纠正，因为它在 Firefox 中看起来还不错。哦，好吧，再次感谢你们的帮助，伙计们！
香农
【讨论】：
我也遇到了同样的问题，经过一番研究找到了解决方案。
<link rel="stylesheet" href="css/style.css"> 链接到它
<!DOCTYPE> 标签 //*这是主要解决方案【讨论】：
有时甚至在添加之后
<!DOCTYPE html>
Css 未加载。
这是因为前面有空格
<!DOCTYPE html>
确保它不存在。
在 IE 中，页面会显示得很糟糕
【讨论】：
不只是之前的空白：
<!DOCTYPE html>
但也要删除样式表（CSS 文件）中花括号前的空格。 简单样式表的示例（想象它在文本编辑器的左边距）：
h1{
font-family:Arial;
color:purple;
}
【讨论】：