html - 包含按钮的链接，2016 年版

Question

代码示例:

<a href="//google.com/"><button>Click me</button></a>

为什么？

我想要按钮。但我也想要它，以便它表现得像一个链接。这意味着当我用鼠标中键单击它时，它会在新选项卡中打开。当我按住 Shift 键并单击它时，它会在新窗口中打开。当我按住 Ctrl 并单击时，它会在新选项卡中打开。当我在没有修饰符的情况下单击时，它会在当前选项卡中打开。

这是在没有框架的情况下完成的。

将链接样式设置为看起来像按钮是 Not Acceptable ，因为“看起来像按钮”是特定于浏览器和设备的。

那又怎么样？

就我现在可以测试的而言，它似乎一直运行良好。浏览器对此行为的支持状态如何，包括移动浏览器？不支持的浏览器以什么方式搞砸了，例如。通过将按钮移到 DOM 中的链接之外？

Answer 1

根据 HTML5 规范，button 标签不能嵌套在 a 标签中。虽然浏览器“可能”呈现您想要实现的目标，但它在技术上是无效的 HTML，并且不能保证在未来工作。

“‘看起来像一个按钮’是特定于浏览器和设备的”是不正确的。假设您没有使用浏览器默认样式的按钮，看起来像一个按钮完全依赖于 CSS。如果您想要有效的 HTML 和您所描述的效果，您只需使用 CSS 将 a 标签设置为看起来像一个按钮。

编辑:

您可能会发现一些 appearance CSS 属性的使用，它强制某些元素的 native UI 呈现，但它并不普遍或标准，并且每个浏览器的实现都会有所不同，并且可能会完全中断或更改版本之间。换句话说，我不会推荐它，但它是最接近您在不使用自定义 CSS 的情况下所要求的东西。