锚链接内的按钮在 Firefox 中有效，但在 Internet Explorer 中无效？

Posted 2023-03-06

【中文标题】锚链接内的按钮在 Firefox 中有效，但在 Internet Explorer 中无效？

【英文标题】：Button inside of anchor link works in Firefox but not in Internet Explorer?

【发布时间】：2010-10-22 14:48:07

【问题描述】：

除了我的链接之外，我网站中的所有其他内容似乎都与所有浏览器兼容。它们出现在页面上，但不起作用。我的链接代码如下 -

<td bgcolor="#ffffff"  valign="top" >
    <p>
        <a href="sc3.html">
            <button style="width:120;height:25">Super Chem #3</button>
        </a> 
        <a href="91hollywood.html">
            <button style="width:120;height:25">91 Hollywood</button>
        </a> 
        <a href="sbubba.html">
            <button style="width:120;height:25">Super Bubba</button>
        </a> 
        <a href="afgoohash.html">
            <button style="width:120;height:25">Afgoo Hash</button>
        </a> 
        <a href="superjack.html">
            <button style="width:120;height:25">Super Jack</button>
        </a> 
        <a href="sog.html">
            <button style="width:120;height:25">Sugar OG</button>
        </a> 
        <a href="91pk91.html">
            <button style="width:120;height:25">91 x PK</button>
        </a> 
        <a href="jedi1.html">
            <button style="width:120;height:25">Jedi</button>
        </a>
    </p>
    <p>&nbsp;</p>
    <a href="http://indynile99.blogspot.com">
        <button style="width:120;height:25">Blog</button>
    </a>
    <p>&nbsp;</p>
</td>

【问题讨论】：

Link inside a button not working in Firefox的可能重复

【参考方案1】：

<button> 不能包含在 <a> 元素中。正如W3's content model description 的<a> 元素所述：

“必须没有交互式内容后代。”

（<button> 被视为interactive content）

要获得您正在寻找的效果，您可以放弃<a> 标签并为每个按钮添加一个简单的事件处理程序，以将浏览器导航到所需位置，例如

<input type="button" value="***.com" onClick="javascript:location.href = 'http://***.com';" />

但是，请考虑不要这样做；常规链接可以正常工作是有原因的：

用户可以立即识别链接并了解他们导航到其他页面 搜索引擎可以将它们识别为链接并关注它们 屏幕阅读器可以将它们识别为链接并适当地建议用户

您还添加了一个完全不必要的要求，即启用 JavaScript 只是为了执行基本导航；这是网络的一个基本方面，我认为这种依赖是不可接受的。

如果需要，您可以使用背景图像或背景颜色、边框和其他技术来设置链接的样式，使它们看起来像按钮，但实际上它们应该是普通链接。

【讨论】：

哇，我听懂了大部分内容，有点过头了...所以，如果我理解正确的话，我要么使用图像作为按钮，要么只是将它们变成普通链接，对吧？

@Jason 是的，通常你会使用图片作为链接，或者使用 CSS 设置常规文本链接的样式。

为什么a里面没有按钮？其他答案说可以，请链接到规则或类似的！

"您不能在 元素中包含 。"谁说的？它在几乎所有浏览器中都能正常工作，甚至是 IE9。微软的无能不再支配网络标准。

只有省略才有效。嵌套链接和按钮从未定义过行为。这与不允许嵌套链接的原因相同。

【参考方案2】：

为什么不使用type="button" 将所有<button> 转换为<span>，然后使用普通的css 按钮类进行样式设置？刚刚确认这在 IE11 中有效。

【参考方案3】：

只需将此 jquery 代码插入 HTML 的头部：

<!--[if lt IE 9 ]>
     <script>
        $(document).ready(function()
            $('a > button').click(function()
                window.location.href = $(this).parent().attr('href');
            );
        );
    </script>
<![endif]-->

【参考方案4】：

这其实很简单，不需要javascript。

首先，将锚点放在按钮内

<button><a href="#">Bar</a></button>

然后，将anchor标签变成块型元素并填充其容器

button a 
  display:block;
  height:100%;
  width:100%;

最后，根据需要添加其他样式。

【讨论】：

这似乎只适用于 Chrome，不适用于 Firefox 或 IE

特别是来自html5 button spec：“必须没有interactive content的后代。”它将锚标记列为第一个示例。

【参考方案5】：

这里的问题是链接位于按钮后面，即使在更改 z-index 时也是如此。此标记也无效 (read the spec)。所以链接不起作用的原因是因为您实际上是单击按钮而不是链接。解决方案是更改您的标记。

<button type="button"><a href="yourlink">Link</a></button>

然后根据需要设置样式。一个演示是here。

【讨论】：

这似乎只适用于 Chrome，不适用于 Firefox 或 IE

特别是来自html5 button spec：“必须没有interactive content的后代。”它将锚标记列为第一个示例。

【参考方案6】：

如果您使用的是 Twitter bootstrap 之类的框架，您可以简单地将类“btn”添加到 a 标签中——我刚刚接到一个用户关于这个问题的电话，显然我的结帐按钮不起作用，因为我有一个按钮在 a 标签内...相反，我只是向其中添加了 btn 类，它现在可以正常工作了.. 大错误，可能会让客户付出代价-有时我忘记对 IE 中的所有内容进行代码检查..

例如 <a href="link.com" class="btn" >Checkout</a>

【参考方案7】：

请注意： W3C 对链接标签内的按钮没有问题，所以它只是另一个 MS 子标准。

回答： 使用代理按钮，除非您想获取完整图像。

代理按钮可以放入标签中（更安全，如果您使用跨度而不是 div）。 它的样式可以看起来像按钮或其他任何东西。 它是通用的 - 一段 css 代码为所有实例提供支持 - 只需定义一次 CSS，然后只需将 html 实例复制并粘贴到您的代码需要的任何位置。 每个按钮都可以有自己的标签 - 非常适合多语言页面（我认为为每种语言制作图片更容易） - 还可以更轻松地在整个脚本中传播实例。 将其宽度调整为标签长度 - 如果您想要的话，也可以采用固定宽度。 IE7 是上面的一个例外 - 它必须有宽度，或者会使这个按钮从一个边缘到另一个边缘 - 或者给它宽度，你可以向左浮动按钮 - IE7 的 css： 一种。 .宽度：150像素； （注意属性前的点，我通常通过添加这样的点来定位 IE7 - 删除点和属性将被所有浏览器读取） 湾。文本对齐：居中； - 如果你有固定宽度，你必须让这个居中文本/标签 C。光标：指针； - 所有 IE 都必须有这个才能正确显示链接指针 - 好的浏览器不需要它 您可以继续使用此代码并使用 CSS3 对其进行样式设置，而不是使用图像： 一种。圆角的半径（限制：IE 将显示为正方形） 湾。渐变使其“像按钮一样”（限制：Opera 不支持渐变，因此请记住为该浏览器设置标准背景颜色） C。使用 :hover pclass 根据鼠标指针位置等更改按钮状态 - 您可以将其仅应用于文本标签或整个按钮

CSS 代码如下：

.button_surrogate span  margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_edge.png) left top no-repeat; 

.button_surrogate span span  display:block; padding:0 14px; height:25px; background:url(right_button_edge.png) right top no-repeat; 

.button_surrogate span span span  display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; 

下面的 HTML 代码（按钮实例）：

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>

【讨论】：

当我将按钮放入锚标记时，Firefox 的 HTML 验证器扩展会产生错误：line 36 column 84 - Warning: inserting implicit <a> line 36 column 93 - Warning: discarding unexpected </button> line 36 column 53 - Warning: missing </button> line 36 column 37 - Warning: missing </a> before </div>

第一句话不正确。 和 在 HTML 规范中是不允许的。

我想指出，这里的 HTML 标记是可怕的，对于任何想要编写可维护的东西的人来说，这是一个不可接受的解决方案。必须记住这种语法本身就很困难，更不用说您可能选择使用的任何其他技巧了。相反，如果您需要支持 IE 8，使用 IE 8 支持的标记可能会有所帮助。叫我老帽子。但我喜欢有效的代码，而不是假装不是的代码。

实际上你应该喜欢它，因为它有效——这符合你的推理。

【参考方案8】：

$("a > button").live('click', function()  
    location.href = $(this).closest("a").attr("href");
); // fixed

【讨论】：

对于那些想知道的人来说，这似乎是一段使用过时 jQuery 函数的代码。使用当前版本的 jQuery，您需要将 .live 替换为 .on。如果您使用的是prototypejs，请尝试从 $$ 函数开始。

链接中的按钮不是有效的 HTML 并且具有未定义的行为。

我在 IE8 中遇到了这个问题

你用的jQuery是什么版本的？究竟是什么问题？

【参考方案9】：

<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>

这很好用，我在 IE9 上测试过。

【讨论】：

这能回答问题吗？ Button inside of anchor link works in Firefox but not in Internet Explorer?

【参考方案10】：

下面的代码在所有浏览器中都可以正常工作：

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>

【讨论】：

不过，这对于搜索引擎优化不是很好。如果您希望它链接的页面获得高排名，不推荐。

【参考方案11】：

由于这只是 IE 中的一个问题，为了解决这个问题，我首先检测浏览器是否为 IE，如果是，则使用 jquery click 事件。我将此代码放入一个全局文件中，以便在整个站点中对其进行修复。

if (navigator.appName === 'Microsoft Internet Explorer')

    $('a input.button').click(function()
    
        window.location = $(this).closest('a').attr('href');
    );

这样我们只需要将点击事件分配给 IE 的链接输入按钮的开销。 注意：上面的代码在一个文档就绪函数中，以确保页面在分配点击事件之前完全加载。

我还为我的输入按钮分配了类名，以节省使用 IE 时的一些开销，以便我可以搜索

$('a input.button')

而不是

$('a input[type=button]')

.

<a href="some_link"><input type="button" class="button" value="some value" /></a>

除此之外，我还利用 CSS 使鼠标悬停在按钮上时看起来可点击：

input.button cursor: pointer

【参考方案12】：

我发现这对我有用

<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">

【参考方案13】：

a 标记内不能有按钮。但是，您可以执行一些 javascript 来使其正常工作。

【讨论】：

有趣的是，我在 12 年前学习 HTML 时尝试过这个。呵呵。

W3C 是否规定锚点中不能有按钮，或者这只是 Microsoft 的实现？

糟糕的 Microsoft 实施，通常也是不好的做法。规范中没有规定按钮不能进入链接，但这是不好的做法，因为您有 2 个竞争事件需要在用户单击它时发生 - 它是按下按钮还是跟随链接？正是这一点让 IE 感到困惑（以及许多其他事情！），并且有一个很好的理由不这样做。

这是糟糕的 MSFT 实施。 HTML5 的规范规定锚标记可以作为块元素。