css布局在ie中失败，在opera中有小错误。帮帮我？

Question

我设计了一个基于this one（来自here）的布局 - 我自由地重新安排了一些搜索引擎优化可能的divs。你可以看看我做了什么here（css）。

事实上，我的布局有一个小错误 - 在Opera中，视口不会扩展为容纳页脚（即，如果仅页脚不在视图中，则不显示滚动条）。否则，它可以在Opera 11，Firefox 4和IE 8中完美运行。但是，当我将它上传到site（layout css）时，它发现页面在IE中看起来坏了 - 左栏出现在中间的一个之上，并且只有在我的IE开发人员工具中使用左列参数时才会显示标题。

那么，谁能帮我弄清楚什么打破了页面？我知道这个问题更适合doctype.com，但由于某些原因我无法登录。

不过，我宁愿在我的HTML源代码的div顺序如下：

1. 内容
2. 页脚
3. 左列
4. 右列
5. 头

我不需要命题f或新的布局。我想了解为什么this在IE中工作，而this没有。

Answer 1

当面对困难的工程问题，无论是编程，网页设计，或电子产品，往往是最成功的方法（至少对我来说）是“由外而内”的方法。最困难的想法之一是让自己使用它，因为它“只是一个小小的调整”，你会做出并修复所有事情......当我花了一段时间寻找适当的调整，我知道我应该改变我的方法。

因此，从头开始，我重建了index.php的一个副本，从破碎的原始文件中粘贴位，以便弄清楚什么是中断的东西。而且，果然，事实证明，罪魁祸首是...... DOCTYPE，这是我从未关注过的 - 因为我最近才开始将网页作为我工作的一部分，关心兼容性等。我打了一个XHTML 1.0过渡型文档，而不是原始的HTML，它的工作就像一个魅力。

感谢大家谁帮助，特别是@Magnum的努力。

（：

Answer 2

方案二为SEO：

<div id=siteBox> 
    <div id=center class=column> 
    <h1>This is the main content.</h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> 
    </div> 
    <div id=header>This is the header.</div> 
    <div id=left class=column> 
    <h2>This is the left sidebar.</h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> 
    </div> 
    <div id=right class=column> 
    <h2>This is the right sidebar.</h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> 
    </div> 
    <div id=footer>This is the footer.</div> 
    </div> 

Answer 3

虽然A-List的除了是我最喜欢的网站之一，我发现有时他们建议的CSS并不总是跨浏览器如人们所兼容喜欢它。 Mathew James Taylor可以找到同样的布局，它可以跨浏览器兼容，并且不需要JavaScript来完成。尽管如此，准备在CSS中进行髋关节深度检测。这是我现在大部分基本布局使用的CSS模板。一旦你分析了所有的容器如何配合在一起，我发现它非常灵活。

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm