【发布时间】：2011-08-25 00:33:05
【问题描述】：
这实际上是关于我的简单页面的两部分问题（有一天将被真实内容取代），用于垂直居中的 HTML+CSS 样板和 IE7。
-
谁能提供详细解释为什么页面在非 IE 浏览器（Chrome、Fx、Opera）中正确显示，几乎都是最近的 IE（IE5.5、IE6、IE8、IE9），但不是IE7？
我特别感兴趣：它在 IE6 中可以工作，但在 IE7 中却不能工作，因为……有点解释。
-
要使
div#c在 IE7 中正确垂直居中，应该进行哪些更改？
我正在为div#c使用特定的高度，但使用的样板与高度无关，修复应该保留此功能。破坏其他浏览器不是一种选择，除非它是 IE5.5（好吧，IE6 也是，但前提是它确实是不可避免的）。
也不接受更改
<!DOCTYPE html>并将 IE 转换为 quirks 模式（这对于新开发的页面来说是一种非常糟糕的做法）。
如果你没有IE7（和我一样），你可以访问http://ipinfo.info/netrenderer/或http://browserling.com/，在那里粘贴URL并选择IE7自己查看问题。
因为页面在接受某些答案后会发生变化，所以我提供了其中相关 HTML 和 CSS 部分的快照（徽标 URL 已更改为绝对 URL）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;"><a href="http://przemoc.net/">Przemoc's network</a></p>
</div></div>
</body>
</html>
【问题讨论】：
-
如果有机会，我会看看您的更新/赏金问题。之前的调查似乎毫无意义。不过只有一件事 - 你应该忘记曾经存在过的 IE5(.5)。请参阅：en.wikipedia.org/wiki/… - 没有人 使用它。
-
@thirtydot 可以，没必要支持IE5.5（我一开始就说里面的破坏页是可以接受的，所以不知道你为什么要带它来），但是当事情“顺便说一句”在那里工作时，这很好。 :) 不幸的是 IE6 还没有死。
标签： css internet-explorer-7 vertical-alignment centering