css - 垂直对齐底部在 Firefox 和 Opera 中失败

Question

我有一个高度为 69px 的菜单，并希望底部的文本高度在其空间内。

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 中却不行。我应该使用什么钩子(Hook)来修改这个问题？

我该怎么办？

Answer 1

您的代码中缺少很多东西，首先您正在使用 display:box(现在正确的名称将是 flexbox)，并且就像您可能已经知道此功能一样，它还不支持所有浏览器，那么您需要许多前缀才能使其正常工作。另一个问题是你在 display:box 的元素中使用 float right 并且这导致了 firefox 上的错误，但不要担心一切都有解决方案并且你是正确的 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;
}

这是来自 David Storey 的关于 Smashing Code 的非常好的教程，取一个 look