css - Firefox 和 Chrome 上的 margin-top

Question

我的网站上有一个侧面导航栏。侧边栏随您滑动并更改 margin-top。 在 google chrome 上，它会跟随您，而在 firefox 中，它会让所有框都跟随您，这不会让您向下滚动页面。 http://jsfiddle.net/rDV3T/这是一个例子。

<span class="hi">HI</span>
<span class="hello">Hello</span>

CSS

.hi {
    margin-top: 10px;
    background-color: red;
    display: inline-table;
}
.hello {
    display: inline-table;
}

如果你在 firefox 上测试，所有的框都会下降 10 px，而在 chrome 中只有指定的框 (hi) 会下降。 我该如何解决这个问题？ 谢谢你，抱歉我的英语不好和解释。

Answer 1

如果您将 vertical-align: top; 添加到您的 hello 类中，该示例在所有浏览器上看起来都一样。

.hello {
    display: inline-table;
    vertical-align: top;
}