我的网站在 chrome 中完美运行，但现在我已经使用 IE7 对其进行了测试，不仅网站左对齐，而且全宽 (100%) 标题背景不再一直延伸，并且标题和内容左对齐。
似乎只有页脚才能正常工作。我不知道为什么会这样，但不是“破解”它来工作，我确信我的代码中有一些错误。
我无法弄清楚这一点！这是我的代码：
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Title</title>
<link href="main2.css" rel="stylesheet" type="text/css">
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<div id="header_content">
<a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
<ul>
<li><a href="/posts/list/">Link1</a></li>
<li><a href="/posts/create/">Link 2</a></li>
<li><a href="/about">Link 3</a></li>
</ul>
</div>
</div>
<div id="main">
There are many sticky footer methods to be found in Google. I've tried many of them and they usually fail in some regards. The problem it seems is that some of these methods are old and may have worked in older browsers but they don't in newer browser releases. Because those pages are old, and were heavily linked too in the past, they still rank high in Google. Many webmasters looking for a sticky footer solution end up scratching their heads as they try these same old methods because they are the first ones they end up finding when they search.
</div>
</div>
<div id="footer">
<div id="footer_content">
© 2012 Company, Inc.
<ul>
<li><a href="/contact">Contact</a></li>
<li><a href="/contact">Terms</a></li>
<li><a href="/contact">Privacy</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
* { margin: 0; padding: 0; }
html, body {height: 100%; }
body { min-width:900px; }
/* LAYOUT */
#wrap {min-height: 100%;}
#main { background-color: purple; margin: 0 auto; overflow: auto; padding-bottom: 60px; width: 900px; }
body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ } /*Opera Fix*/
/* HEADER */
#header { background-color: orange; width: 100%; line-height: 60px; }
#header_content { position: relative; width: 900px; margin: 0 auto; }
#header ul { list-style: none; position: absolute; top: 0; right: 0; }
#header ul li { float: left; }
#header ul li a { font-weight: bold; text-decoration: none; }
#header ul li a:hover { }
/* FOOTER */
#footer { margin-top: -60px; clear:both; background-color: blue; line-height: 60px; }
#footer_content { width: 900px; margin: 0 auto; position: relative;}
#footer ul { list-style: none; position: absolute; top: 0px; right: 0; }
#footer ul li { float: left; margin-right: 5px; }
#footer ul li a { font-weight: bold; margin-right: 5px; text-decoration: none; }
#footer ul li a:hover { }