Question

代码示例：

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

为什么？

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

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

设置链接看起来像一个按钮是不可接受的，因为＆＃34;看起来像一个按钮＆＃34;是浏览器和设备特定的。

那又怎样？

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

Answer 1

根据HTML5规范，button代码无法嵌套在a代码中。虽然浏览器“可能”呈现您想要实现的内容，但它在技术上无效的HTML并且无法保证将来可以使用。

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

编辑：

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

Answer 2

问题在于你想要的东西既是“真正的按钮”（在某种意义上，浏览器在视觉上呈现像按钮，它会像按钮一样触发等），但也具有“真正的锚”特质（例如，它可以右键单击以在新选项卡中打开，可以设置样式等。）但按钮和锚点（显然）不是相同的东西。它们是相似的，但两者都是分开的想法，因为它们不一样。

也许可以想象一个像“type = link”这样的属性可能达到你想象的效果，但HTML规范中目前还没有。

此外，就为什么来说，这不是“正常工作”的原因，原因可能是：

在将浏览器定向到新位置/ URL的意义上，按钮本身并不具有目标。按钮可能会产生这种影响，但按钮通常用于执行触发脚本或提交表单等操作。这两件事都没有隐含地指示浏览器转到新位置。

想象一下，该按钮旨在触发javascript函数，在该函数内部，有一行使用location重定向浏览器。该按钮没有重定向浏览器，javascript函数就是这样做的。浏览器提前不知道会发生这种情况。

现在想象一下，该按钮会触发一个功能，将页面的背景颜色从红色变为蓝色。没有更改浏览器的位置/ URL。

如果有某种方法让按钮表现得像一个锚，并且用户使用ctrl +单击按钮，那么新浏览器窗口会在这个新窗口/标签中做什么呢？打开与之前完全相同的内容，但背景为蓝色？或者打开一个没有内容但只有蓝色背景的空白窗口？
如果您按照描述嵌套链接内的按钮：

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

您实际上是在告诉浏览器执行两项操作。其中一个是“关注此链接”，另一个是“执行此按钮点击”。就像嵌套锚元素具有意外和不支持的结果一样，嵌套按钮和锚点也是如此。浏览器如何知道用户“真正意味着”哪个元素或者每个元素使用哪个部分？
如果您想要一种让UI控件通知浏览器打开新位置的方法，允许浏览器选择右键单击并复制该位置，为该位置添加书签或打开该位置等选项一个新标签，这已经存在。它被称为锚点，看起来像<a>。如果你想要looks like a button but feels like an anchor的东西，这意味着一个样式的锚看起来像一个按钮。样式应该通过CSS完成，而不是通过看起来更像你想要的元素。我确信杰夫提倡让元素具有原生风格的价值（比如不试图过度设置链接或段落或输入的样式，并允许元素只是遵循浏览器/基于用户的外观-style-options默认使用），而不是建议使用不合适的元素，以便为其他元素捎带内置样式而不是使用正确的元素。
最后，就我昨天看到的关于not styling divs to look like buttons的相关SO答案提出了这种情况。 HTML规范中的某些东西可能像你想要的那样起到预期的中间地位，可能是menu元素，但到目前为止，它还没有在任何主流浏览器中以正确的（遵循规范）方式实现。但这可能是因为没有直言不讳的倡导者可以拥有它的用例。所以也许这可能就是其中之一，你可以团结起来让这个元素被采纳而不是再次传递。

Answer 3

如果你正在使用bootstrap，那么它的视图很棒......就像这个

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
    <a href="//google.com/" class="btn btn-success">Click me</a>
</div>

or you can do like this,

<div>
    <a href="//google.com/"><button>Click me</button></a>
</div>

包含按钮的链接，2016版

代码示例：

为什么？

那又怎样？

3 个答案: