2

已经在这个网站上工作了一段时间，在 Mac 和 PC Firefox 以及 Safari 上都能完美运行。然而，IE 使该网站几乎一片空白——关于发生了什么的任何想法？任何解决方法？

预先感谢您的帮助！

http://www.alliedprintingsolutions.com

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

4

11 回答 11

14

Your html is invalid in many ways. Please fix that first.

于 2009-02-27T17:44:30.033 回答
8

Add a DOCTYPE!

Either HTML5 or HTML4 Strict (not Transitional) are recommended for best cross-browser support.

<!DOCTYPE html>



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


(As you can see, HTML5 is much simpler, and still usable even if you're not yet using HTML5 tags.)


Note: The DOCTYPE must be very first thing in the file, before all other tags, and with no blank lines, tabs, nor spaces before it.

于 2009-02-27T17:50:51.140 回答
2

You may want to try adding a doctype. 

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

Edit: The doctype declaration should be the first thing in the html file. It goes even before the <html> tag.

于 2009-02-27T17:45:27.363 回答
1

快速解决方案：删除“溢出：自动；” 来自#wrapperbig 和#wrapper。

这将获得要显示的内容。

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

于 2009-02-27T18:06:13.850 回答
1

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

  1. 不要在 HTML 文件上编码 CSS
  2. 制作一个单独的 CSfile 并使用链接到它<link rel="stylesheet" href="css/style.css">
  3. 并且总是<!DOCTYPE>在每个 HTML 页面上添加标签 //*这是主要的解决方案
于 2013-07-31T15:19:56.660 回答
0

I don't have FireBug on me right now (if you don't have this extension - get it!) But using images in the way you are right now is the problem.

Use CSS to apply a "background-image" attribute for your site's main content. For example:

<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>

That will work much better, and will work in all browsers just fine :)

In response to comment

I don't want to say your wrong, but when I can click and drag the background images with my mouse cursor that means that you are using an IMG tag to show the background instead of (or in conjunction with) the background-image attribute. I can almost gurentee that that is your problem. Remove all of your img tags and replace them with divs and the background-image style and your problem will be resolved.

If I had firebug on me I could go into more detail.

Second edit with example code

Here is some rough code that may help you remove your unneccecary image use.

<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>

:)

于 2009-02-27T17:40:58.980 回答
0

Had a quick look at the code in firebug. You seem to have a z-index of -1 on the content div (#wrapperbig), which browsers should ignore for non-absolute/relative content - this may be an odd implementation in IE.

Also, as mentioned before, add a doctype - IE will render the site in 'quirks mode' if there is no doctype.

于 2009-02-27T17:56:07.867 回答
0

谢谢大家的建议，大家。大部分内容现在都显示在 IE 上（相对应如此），除了页脚以粗俗的方式切割我的页面（哈哈）。我明白你在说什么，Nelson LaQuet，关于标题图像，我将不得不尝试使用它们，我对 CSS 还是很陌生，并且弄清楚将它们全部正确放置在图像映射中是很头疼的. 至于 Doctype，我按照您告诉我的方式添加了它，即使在 Firefox 上它似乎也弄乱了一些内容，所以我知道我必须经历更多错误。当我删除它时，一切看起来又正常了。具有绝对定位的“woowoo's”非常必要，因为使用的定位方法是我能找到的唯一方法来处理背景图像和标题图像，列 div 在正确的位置。至少我取得了一些积极的进展，但我想我还有更多的工作要做：/只是希望它更容易纠正，因为它在 Firefox 中看起来还不错。哦，好吧，再次感谢您的所有帮助，伙计们！

香农

于 2009-02-27T19:38:52.537 回答
0

有时甚至在添加之后

<!DOCTYPE html>

未加载 CSS。

这是因为之前的空白

  <!DOCTYPE html>

确保它不存在。

否则在 IE 中，页面会显示得很糟糕

于 2013-10-14T18:44:01.930 回答
0

content_left 和 content_right 的绝对定位发生了太多的 woo-doo 事情。您可以通过删除“位置：绝对”并将其替换为两个内容中的“浮动：左”（将包装宽度设置为 100%）。

于 2009-02-27T18:09:32.407 回答
0

不仅仅是之前的空白：

    <!DOCTYPE html>

还要删除样式表（CSS 文件）中花括号前的空格。简单样式表的示例（想象它在文本编辑器的左边距）：

    h1{
     font-family:Arial;
     color:purple;
    }
于 2014-03-13T17:05:36.250 回答