Firefox 和 chrome 上的边距顶部

Question

我的网站上有一个侧边导航栏。侧边栏与您一起滑动并更改页边距顶部。 在 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 像素，而在 chrome 中只有分配的框 (hi) 会下降。 我该如何解决这个问题？ 谢谢你，对不起我糟糕的英语和解释。

Answer 1

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

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

Answer 2

您应该使用 CSS 浮动属性。代替display:inline-table，使用float:left 使所有框都向左浮动。 （您还需要一个 <div> 和属性 clear:both 在您的两个跨度之后。）

Answer 3

您可以使用display: inline-block 解决您的问题或输入.hello vertical-align: bottom;

LIVE DEMO

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