Question

我有一个小小的移动导航按钮，可以在小屏幕上显示导航。这些天孩子们称它为“汉堡包”。它一直很适合我，但只是注意到它没有出现在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;
  }

Answer 1

尝试用span替换它们，而不是使用div元素。 button元素是内联类型，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评论的内容
@cimmanon说：

验证您的文档。在此上下文中，元素div不允许作为元素按钮的子元素。（抑制此子树中的更多错误。）

Answer 2

在此示例中为每个div添加内容：http://jsbin.com/eviyah/1/edit

即使只是空格，比如

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

然而，它是桌面版而非移动测试版。也许它会有所帮助！

Div的内部按钮元素没有出现在firefox中

2 个答案: