0

我有一个菜单，它的高度为 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 中则不行。我应该使用什么钩子来修改这个问题？

我应该怎么办？

4

1 回答 1

0

您的代码中缺少很多东西，首先您正在使用display:box（现在正确的名称将是flexbox），并且就像您可能已经知道此功能一样，它尚不支持每个浏览器，那么您需要很多前缀来制作它按应有的方式工作。另一个问题是你在元素中使用 floatdisplay:box并且这导致了 Firefox 上的错误，但不要担心一切都有解决方案，你就在这里

新的 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 的一个非常好的教程，看看

于 2013-06-04T12:21:22.427 回答