这实际上是关于我的简单页面的两个部分问题（将在某一天用真实内容替换），用于垂直居中的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转换为怪癖模式（对于新开发的页面来说这是一个非常糟糕的做法）。
如果你没有IE7（就像我一样），你可以访问http://ipinfo.info/netrenderer/或http://browserling.com/，在那里粘贴网址并选择IE7自己查看问题。
因为页面会在接受一些答案后发生变化，所以我会从中提供相关HTML和CSS部分的快照（徽标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>
答案 0 :(得分：4)
您的Q＃1已经answered by @thirtydot，IE7及以下版本不支持CSS表格属性，因此必须找到另一种方法。他的绝对定位技术通常是这种情况的首选方式，因为大多数时候这样做（启动页面？）中心内容的宽度和高度都是已知的。
每条评论 以上附录：
为了回答它为什么在IE6而不是IE7工作，即使IE6也不支持表属性，IE7实际上是从position: static规则中获取#middle[id] {}规则 - IE7确实理解这种类型选择器，这意味着后来的绝对/相对定位与IE6中的相同（
考虑到上面的重做CSS以确保IE7和6获得相同的CSS并且稍后在级联中放置以覆盖“好”的CSS，结果是定位方法也是高度不可知的，在评论有各种链接来测试这个，但这是最终的工作版本：
这个小提琴确实包括图像的宽度和高度，但是如果你删除它们并定位“子文本”它会（或应该）显示中间的任何东西确实保持居中
使用的 HTML 与此答案的底部相同。减去额外的<i></i>元素
<强> CSS：
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#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;
}
#footer p {margin: 0;}
正如使用HTML5样板用于有条件地对HTML元素进行分类的技术的评论所指出的那样：
意味着您可以用以下内容替换IE7黑客：
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
您可能会通过条件评论或黑客将以下技术与“table-cell”技术混合使用，但就我的测试所见，这种（hacky！）技术在浏览器中起作用
正如你所要求的高度不可知版本..你可能会或可能不喜欢“火柴棍”技术，这涉及使用内联块并将它们排成一行..“火柴棍”是100％高空，关闭页面，内联块元素，其垂直对齐设置为“中”，一旦它就位，下一个内联块（您的实际内容div）位于它旁边并与中间对齐，然后使用text-align: center;它你也有水平居中
注意：我的宽度完好无损，但你可以通过去除高度和高度来测试没有宽度/高度的情况。宽度关闭#c并删除#c div文本div的CSS - 在纯文本方案中，将文本输入这些div中的任何一个都应该“自动”居中。
并特别注意在外部div中插入额外的<i></i> HTML（这可能是为什么这不是首选方法！），这是支持整个页面打开的“火柴棍”。
小提琴中使用的代码：
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#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; }
<强> HTML：
<div id="outer">
<i></i>
<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>
答案 1 :(得分：3)
IE7 does not support display: table-cell，您将其作为垂直居中技术的一部分使用。
您的页面相对简单，因此我简化了HTML / CSS。在我测试的任何地方，中心现在都能正常工作。
完整代码： http://jsbin.com/azuhe4
答案 2 :(得分：0)
导致此行为的行是......
position: static
...关于“#middle”CSS规范。
如果我禁用该行，IE7似乎会在页面中间呈现（或多或少）徽标。
答案 3 :(得分：0)
这是<!DOCTYPE>。
IE6＆amp; 7对于那个有点片状（无论如何，这是我读过的）。
如果您执行以下操作，您会看到一些问题 - 使用您的代码（不进行编辑，除了几个边框以查看正在发生的事情）。
这就是我的所作所为：
<!DOCTYPE> border:1px dotted gray border-color只是为了看哪个是哪个。然后粘贴<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，再次点击“刷新”。看起来很好。垂直，水平居中。
截至2011年4月20日，W3C将<!DOCTYPE HTML>称为“非标准”。当然，IE6 / 7不知道该标签的含义。 http://www.w3.org/QA/2002/04/valid-dtd-list.html
答案 4 :(得分：0)
我为此获得了新的简单解决方案：
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>