火狐和谷歌浏览器上的margin-top

Question

我在我的网站上有一个侧边导航栏。该侧边栏会随着你的滚动而滑动，并更改margin-top属性。 在谷歌浏览器中，它会跟随您的滚动，而在火狐浏览器中，它会使所有框都跟随您的滚动，这会阻止您向下滚动页面。 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;
}

如果你在火狐浏览器上进行测试，所有的框都下降了10个像素，而在谷歌浏览器中只有指定的框架（hi）下降了。我该怎么解决这个问题呢？感谢您的理解和支持。

- Lohn Claidon

Answer 1

如果您在 hello 类中添加 vertical-align: top; 属性，该示例将在所有浏览器上呈现相同的效果。

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

- Berry Blue

Answer 2

你可以通过使用 display: inline-block 或在 .hello 中加入 vertical-align: bottom; 来解决你的问题。

在线演示

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

- Black Sheep

---

当我添加bottom时，在火狐和谷歌浏览器中都没有任何变化，但是vertical-align: top有效。无论如何，谢谢你。 - Lohn Claidon

你确定吗？你在这里看到了带有vertical-align: top;的演示...但是，如果你说top对你有效...好的！ :) - Black Sheep

Answer 3

您应该使用CSS浮动属性。而不是使用display:inline-table，请使用float:left使所有框左浮动。(您还需要在两个之后添加一个带有clear:both属性的

。）

- Hardmath123

---

当我使用浮点数时，我的整个页面都会“崩溃”。我可以修复它，但它看起来不一样了。但还是谢谢。 - Lohn Claidon