带有的按钮在 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 禁止与按钮内的内容进行交互是理所当然的。

带有的按钮在 Mozilla Firefox 中不工作，在 Google Chrome 中工作

Button with is not working in Mozilla Firefox and working in Google Chorme

html

javascript

anchor

firefox

button