Неверное вертикальное выравнивание в Firefox и Opera

Question

У меня есть меню, где он имеет высоту 69 пикселей и хочет, чтобы текст в нижней части был высотой в его пространстве.

Ссылку JSFiddle является: http://jsfiddle.net/YFuFV/

<div class="header fondo_amarillo"> 

<div class="header_central"> 
    <div class="grid_12"> 
     <div class="menu_option"><a href="#">Option 5</a></div> 
     <div class="menu_option"><a href="#">Option 5</a></div> 
     <div class="menu_option"><a href="#">Option 4</a></div> 
     <div class="menu_option"><a href="#">Option 3</a></div> 
     <div class="menu_option"><a href="#">Option 2</a></div> 
     <div class="menu_option"><a href="#">Option 1</a></div> 
    </div> 
</div> 

CSS:

.header { 
    width:100%; 
    height:70px; 
} 
.header_central { 
    max-width:960px; 
    height:100%; 
    margin:0 auto; 
} 
.menu_option a { 
    font-family:'NeoSans-Light'; 
    font-size:18px; 
    height:69px; 
    vertical-align:bottom; 
    color:rgb(150,150,150); 
    float:right; 
    padding:0 5px; 
    display: block; 
    display: -webkit-box; 
    -webkit-box-align: end; 
    -webkit-box-pack: center; 
    display: -moz-box; 
    -moz-box-align: end; 
    -moz-box-pack: center; 
    display: box; 
    box-align: end; 
    box-pack: center; 
} 
.menu_option a:hover { 
    color:rgb(84,84,84); 
} 
.fondo_amarillo { 
    background-color:#FFFF58; 
} 

Если вы видите этот код в Chrome и Safari, он работает как хотелось бы, но не в Firefox. Какой крюк я должен использовать для внесения изменений в эту проблему?

Что мне делать?

Answer 1

В коде есть куча вещей, в первую очередь вы используете display:box (теперь правильное имя будет flexbox), и, как вы, вероятно, уже знаете эту функцию, она еще не поддерживает для каждого браузера, тогда вам нужно много префикса, чтобы заставить его работать так, как должно. Другая проблема заключается в том, что вы используете поплавок прямо в элементе с display:box и что вызывает ошибку на светлячок, но не волнуйтесь, все есть решение и ваш правильно here

Новый CSS

.menu_option{ 
    float: right; 
} 
.menu_option a { 
    font-family:'NeoSans-Light'; 
    font-size:18px; 
    height:69px; 
    color:rgb(150,150,150); 
    padding:0 5px; 

    display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ 
    display: -moz-box;  /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox; /* MID: IE 10 */ 
    display: -webkit-flex; /* NEW, Chrome 21+ */ 
    display: flex;   /* NEW: Opera 12.1, Firefox 22+ */ 

    -webkit-box-align: end; -moz-box-align: end; /* OLD… */ 
    -ms-flex-align: end; /* You know the drill now… */ 
    -webkit-align-items: flex-end; 
    align-items: flex-end; 
} 

Вот очень хороший учебник от Дэвида Стори на Smashing код, возьмите look