Question

我在处理IE中另一个div中div的垂直对齐时遇到了麻烦。

我的HTML代码如下：

<div class="header">
    <div id="mainMenu">
        <!--Here goes my main menu-->
    </div>
</div>

我的风格如下：

#mainMenu
{
/*background-color: #FFF;*/ 
font-family: fantasy, cursive, Serif;   
font-size:16px; 
/*border-bottom:1px solid #000000;*/    
height:125px;

position:relative;

}

.header {
top: 0px;
    color:#FFA500;
z-index:1000;
height:120px;
padding:8px 2px 8px 15px;
overflow:hidden;
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
background: url("../images/plusoneurls_resize.png") repeat scroll 0 0 transparent;
 }

现在在Firefox中，我的主要项目显示在底部，当我将高度属性设置为120px（100％）附加到 #mainMenu 的样式时，但是它不适用于IE。

我甚至尝试过给予 top：100％，在Firefox中它表现得很好，但在IE中，它已经溢出到主要内容中。

如何为此设计解决方法？

Answer 1

检查您是否处于Quirks模式。

如果HTML代码顶部没有有效的<!DOCTYPE>声明，IE将进入Quirks模式。这种模式改变了CSS的许多方面，并且往往会对元素的高度和宽度产生相当大的影响。

Quirks模式是一项遗留功能，不应再使用，因此您应始终确保拥有有效的doctype。你没有提供足够的代码让我知道你是否有一个，但如果没有，你需要添加一个。

如果您不确定要使用哪种doctype，只需使用HTML5 doctype，如下所示：

<!DOCTYPE html>

将它放在HTML代码的最顶部（第一行，<html>标记之前或其他任何内容。）

Answer 2

使用CSS重置。 YUI provides a good one.

Answer 3

#mainMenu
{
 position: absolute;
 bottom: 0;
 left: 0; 
}

.header
{
 position: relative;
}

How (Not) To Vertically Center Content

肯定会建议使用CSS，但他们也使用Tables

来说明和示例

Answer 4

确保两个浏览器的缩放级别都设置为100％。（按Ctrl + 0）

我的div的高度在IE和Firefox中是不一样的

4 个答案: