Question

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

<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的元素中使用float并且导致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

Firefox＆amp;中的垂直对齐底部失败歌剧

1 个答案: