0

小さな画面でナビゲーションを表示するための小さなモバイル ナビゲーション ボタンがあります。最近、子供たちはそれを「ハンバーガー」と呼んでいます。私にとってはうまく機能していますが、firefoxに表示されないことに気付きました。一部の JavaScript をトリガーするため、「ボタン」である必要があります。ボタンを display: block; にした場合、私は考えました。内部にdivを入れることができました。そうではありませんか？

HTML

<button class="mobile-nav-button">

  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>

</button> <!-- mobile-nav-button -->

CSS

.mobile-nav-button {
  display: inline-block;
  border: 0; outline: 0;
  background: transparent;
  width: 10em;
  height: 10em;
}

  .bar {
    width: 100%;
    float: left;
    height: 22%;
    margin-bottom: 17%;
    background-color: #f06;
  }

  .bar:last-of-type {
    margin-bottom: 0;
  }
4

2 に答える 2

2

div 要素を使用する代わりに、span に置き換えてみてください。ボタン要素はインライン型で、div 要素はブロック型です。これは、一部のブラウザーがこの種の構造を正しく解釈しないためです。

編集：

これを試して：

.mobile-nav-button {
  position: relative;
    display: inline-block;
  border: 0; outline: 0;
 /* background: transparent;*/
  width: $m-button-size;
  height: $m-button-size;
  .bar {
    display: inline-block;
    width: 100%;
    float: left;
    height: 2.7em;
    margin-bottom: 2em;
    background: #f06;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

EDIT2：

私の最後の解決策は、ボタンの代わりに div または span を使用し、ネイティブ ボタンのようにスタイルを設定することです。また、シマノンがコメントしたものを見てください

@cimmanon は次のように述べています。

ドキュメントを検証します。このコンテキストでは、要素 div を要素ボタンの子として使用できません。(このサブツリーからのさらなるエラーを抑制します。)

于 2013-05-30T22:25:21.480 に答える
0

divこの例でそれぞれにコンテンツを追加する: http://jsbin.com/eviyah/1/edit

スペースだけでも

<div class="bar">&nbsp;</div>
<div class="bar">&nbsp;</div>
<div class="bar">&nbsp;</div>

ただし、これはデスクトップであり、モバイルではテストされていません。多分それは役立つでしょう！

于 2013-05-30T22:23:47.920 に答える