html - 为什么第三列的文字被压低了？

Question

好吧，我编写了这个页面，但我不明白为什么第三列会压低我的文本(或其他元素)。它使用与第一个框相同的样式，但是虽然第一个框没问题，但第三个框将元素向下推了一些像素。

像这样:

HTML

<div id="contentWrapper">
    <div id="sideBar">
        <div class="sidebarBox"></div>
        <div class="sidebarContent">
            <h4>
                Índice
            </h4>
            <ul class="tree">
                <li>
                    <a href="#sinopse">Sinopse</a>
                </li>
                <li>
                    <a href="#tropas">Tropas</a>
                </li>
                <li>
                    <a href="#">Geladeira</a>
                    <ul>
                        <li>
                            <a href="#logica">Lógica</a>
                        </li>
                        <li>
                            <a href="#genio">Gênio</a>
                        </li>
                        <li class="last">
                            <a href="#horror">Horror</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#notas">Notas</a>
                </li>
                <li>
                    <a href="#midia">Mídia</a>
                </li>
                <li class="last">
                    <a href="#referencias">Referências</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="mainBody"></div>
    <div id="infoBar">
        <div class="sidebarBox"></div>3º Column
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
    font:normal normal 14px/20px Helvetica,Arial,sans-serif
}

h4 {
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    padding-top:10px;
    border-bottom:2px solid #2a558c;
    margin-bottom:10px
}

#contentWrapper {
    display:table;
    border-spacing:0;
    width:100%;
    height:500px
}

#contentWrapper > div {
    display:table-cell
}

#sideBar {
    background-color:#E4E5DD;
    width:200px
}

#mainBody {
    background-color:#EEEEE6
}

#infoBar {
    background-color:#e4e5dd;
    width:200px
}

#footer {
    background-color:#323540;
    height:50px
}

.sidebarBox {
    background-color:#323540;
    height:30px;
    width:100%
}

.sidebarContent {
    padding:15px
}

我经常使用 Firebug，甚至尝试在 IE 和 Chrome 中打开它，结果相同。两列都使用相同的 CSS，这种差异让我很害怕。我考虑过用一些负边距“修复”它，但我想先了解问题所在，而不是“workhacking”。

提前致谢!

Answer 1

将 vertical-align: top 添加到 #contentWrapper > div。目前它是基线。

Have a fiddle!

CSS

#contentWrapper > div {
    display: table-cell;
    vertical-align: top;
}

如果没有 vertical-align: top，div 将其垂直对齐基于具有 15px 填充的 .sidebarContent。这导致了 15px 的差距。