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)。おそらく、この機能がすべてのブラウザーでまだサポートされていないことを既に知っているように、作成するには多くのプレフィックスが必要です。それは正常に動作します。もう 1 つの問題は、要素内で float を使用していて、Firefox でバグが発生していることですdisplay:boxが、心配する必要はありません。

新しい 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 Code に関する David Storey の非常に優れたチュートリアルです。

于 2013-06-04T12:21:22.427 に答える