margin-top на 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; 
} 

Если тест на светлячок, все коробки идет вниз 10 точек, в то время как в хроме только назначенный ящик (привет) идет вниз. Как я могу это исправить? Спасибо и извините за мой плохой английский и объяснение.

Answer 1

Если вы добавите vertical-align: top; в ваш класс hello, то пример выглядит одинаково во всех браузерах.

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

Answer 2

Вы должны использовать свойство float CSS. Вместо display:inline-table используйте float:left, чтобы все ящики поплыли влево. (Вы также будете нуждаться в <div> со свойством clear:both после обоего ваших пролетов.)

Answer 3

Вы можете решить вашу проблему с display: inline-block или положить в .hellovertical-align: bottom;

LIVE DEMO

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