javascript - 按钮在 Mozilla Firefox 中不起作用，但在 Google Chrome 中不起作用

Question

我的表单有两个按钮，可在 Google Chrome 中正常工作，但在 Mozilla Firefox 中无法工作。我应该做什么？

<td>
    <button type="button">
        <a href="edit_teacher.php?edit=<?php echo $row['teach_id']; ?>">
            <span class="glyphicon glyphicon-edit" style="font-size: 20px; color: green;"></span>
        </a>
    </button>
</td>
<td>
    <button type="button">
        <a href="delete_teach.php?del=<?php echo $row['teach_id']; ?>" onclick="return confirm('The Record will be Deleted....???');">
            <span class="glyphicon glyphicon-trash" style="font-size: 20px; color: #ac2925;" ></span>
        </a>
     </button>
</td>

Answer 1

将 a 标记放在 button 标记之外。否则按钮将消耗该事件。

<td><a href="edit_teacher.php?edit=<?php echo $row['teach_id']; ?>"><button type="button"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: green;"></span></button></a></td>
<td><a href="delete_teach.php?del=<?php echo $row['teach_id']; ?>" onclick="return confirm('The Record will be Deleted....???');"><button type="button"><span class="glyphicon glyphicon-trash" style="font-size: 20px; color: #ac2925;" ></span></button></a></td>

HTML5 spec for button实际上使得将交互内容放入按钮内无效。

Content model:

Phrasing content, but there must be no interactive content descendant.

因此 Firefox 理所当然地禁止与按钮内的内容进行交互。