php/javascript 按钮中的按钮在 Firefox 中不起作用答案

【问题标题】：php/javascript Button in button doesn't work in firefoxphp/javascript 按钮中的按钮在 Firefox 中不起作用
【发布时间】：2017-07-14 00:51:08
【问题描述】：

首先，我在 php/html 中创建按钮

<button class="accordionLic" id="<?php echo 'accordionClass'.$lic_num?>">#<?php echo $lic_num; ?></button>

我们可以称之为“大按钮”

当文档准备好时，脚本正在启动，为这个按钮（大按钮）创建内容+在其中创建另一个按钮（我们可以称之为“小按钮”）

//...code...//
var text = (elem.innerHTML = accordionHeader[i] + 
'<span style="float:right;font-weight:bold;"><a href="?edit='+id[i]+'">
 <button class="btn btn-default">edit</button></a> '+(i+1)+'</span>') || "";

在输出中是这样的：

<button class="big-button">
  <b>header</b>content

    <span style="float:right">
      <a href="?edit=5"> 
        <button id="small-button">edit</button>
      </a>
    </span>

</button>

问题是（在 Firefox 中）我无法点击small-button——“点击”总是在这个大的。就像big-button 在small-button 前面一样。我试过z-index，但它根本没有帮助。在 Chrome 中不会出现此问题。

【问题讨论】：

按钮内不能有链接。
好吧，我可以删除链接，但问题仍然存在。
正如答案所说，您也不能在按钮内有按钮。

标签： javascript php firefox button

【解决方案1】：

那是因为它无效：不允许在按钮内嵌套交互内容（例如按钮）。这意味着您的大按钮不能是按钮元素。

试着让你的大按钮变成一个 span 元素/div 元素，并带有 display: inline-block;来模拟类似的效果。当然，您可能还想添加一些自定义逻辑以使其感觉是一个按钮（悬停/焦点/tabindex 等），但这取决于您的需要。

另请参阅此答案以了解不允许嵌套在按钮中的内容：Can I nest button inside another button?

【讨论】：

嗯。那很有意思。但是为什么只在firefox中出现问题呢？我讨厌火狐 :)
@Kafus 因为其他浏览器决定宽松，即使它不是必需的。
这是因为不同的浏览器有不同的实现。有些人可能会更严格地遵循规范（他们应该这样做），而有些人往往更“灵活”。我个人更喜欢浏览器更严格一些。这样您可以在开发过程中更快地发现问题。