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

Question

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

<td bgcolor="#ffffff" height="370" valign="top" width="165">
    <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>

Answer 1

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

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

（<button> 被视为interactive content）

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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

首先，将锚点放在按钮内

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

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

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 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>

Answer 8

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

Answer 9

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

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

Answer 10

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

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

Answer 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}

Answer 12

我发现这对我有用

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

Answer 13

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