右键单击选项卡在 Internet Explorer 上不起作用答案

【问题标题】：Right-click tabs doesn't work on Internet Explorer右键单击选项卡在 Internet Explorer 上不起作用
【发布时间】：2014-06-27 19:07:59
【问题描述】：

我们有一些 CSS 按钮。在 Chrome 和其他浏览器中，当您右键单击按钮时，您会看到预期的选项：在新选项卡中打开、在新窗口中打开等。

但是，在 Internet Explorer 中，当您右键单击时，不是正常的右键单击/在新选项卡菜单中打开。相反，它说，（撤消、剪切、复制、粘贴、删除、全选、检查元素）。

HTML 如下所示：

<a href="http://www.example.com/button_link.php"><button class="my-button">Click Here</button></a>

CSS 看起来像这样：

.my-button {
  border: 1px #000000 solid;
  line-height: 1.1em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #eef0f1 repeat-x url("data:image/png;base64,___base_64_stuff_here_____");
}

有什么想法为什么我可以选择使用 Chrome、Opera 等“在新标签页中打开”，但不能使用 Internet Explorer？

【问题讨论】：

什么版本的IE？听起来好像是把你的按钮当成一个输入框。
IE 检测到您右键单击的按钮，所有其他浏览器检测到链接。但是为什么要在链接中添加一个按钮？我之前在相同的结构中遇到了一些问题（也在 IE 中）

标签： php css internet-explorer contextmenu right-click

【解决方案1】：

将button 放在anchor 标记内没有意义。

有几种方法可以做到这一点。其中之一是使用 JavaScript。您可以使用纯 JavaScript 来实现：

<button class="my-button" onclick="window.location.href='http://www.example.com/button_link.php';">Click Here</button>

另一种方法是使用 CSS 使链接看起来像一个按钮，并完全摆脱 button 标记。

【讨论】：

@EmilioGort 我同意你的看法。然而，在某些情况下，当有人希望按钮的外观依赖于浏览器时（也许是为了匹配同一页面上的其他按钮？），第一种方法会更好。