Question

我的网站上有一个侧面导航栏。侧边栏与您一起滑动并更改margin-top。在谷歌浏览器上，它跟随你，而在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;
}

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; 
}

Firefox和Chrome上的margin-top

3 个答案: