0

我有一个小的移动导航按钮，可以在小屏幕上显示导航。这些天孩子们称它为“汉堡包”。它对我来说一直很好，但只是注意到它没有出现在 Firefox 中。它应该是一个“按钮”，因为它会触发一些 javaScript。我想，如果我让按钮显示：块；我可以把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 替换它们。button 元素是 inline 类型， div 元素是 block 类型，因为有些浏览器不会正确解释这种结构。

编辑：

尝试这个：

.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;
    }
  }
}

编辑2：

好的，我的最后一个解决方案是使用 div 或 span 而不是按钮并将其设置为看起来像本机按钮。也看看cimmanon评论了什么

@cimmonon 说：

验证您的文档。在此上下文中，不允许元素 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 回答