锚链接内的按钮在Firefox中有效，但在Internet Explorer中不起作用？

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

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

您不能<button>在<a>元素内部。作为W3的内容模型对<a>元素状态的描述：

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

（一个<button>被认为是交互式内容）

为了获得想要的效果，您可以抛开<a>标签并向每个按钮添加一个简单的事件处理程序，该按钮将浏览器导航到所需位置，例如

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

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

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

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

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

只需注意：
W3C链接标签内的按钮没有问题，因此它只是另一个MS次标准。

答：
除非您要查看完整图像，否则请使用代理按钮。

可以将“代理”按钮放入标记中（如果使用跨度，则更安全，而不是div）。

可以将其设置为看起来像按钮或其他任何样式。

它是通用的-一段css代码为所有实例提供支持-只需定义一次CSS，然后从该位置仅在代码需要的地方复制并粘贴html实例。

每个按钮都可以有自己的标签-非常适合使用多种语言的页面（我认为很容易为每种语言做图片）-还可以使整个脚本更容易地传播实例。

调整其宽度以适应标签长度-如果需要，也可以采用固定宽度。 一种。.width：150px; （在属性之前记下点，我通常通过添加这样的点来定位IE7-删除点，所有浏览器都会读取该属性）
IE7是上面的一个例外-它必须具有宽度，否则会使按钮从一个边缘到另一个边缘-除了为其提供宽度之外，您还可以向左浮动按钮
-IE7的CSS：

b。text-align：center; -如果宽度固定，则必须将其居中放置文本/标签
c。cursor：pointer; -所有IE都必须具有此属性才能正确显示链接指针-优秀的浏览器不需要它。

您可以继续使用此代码，并使用CSS3对其进行样式设置，而不是使用图像：
一。圆角的半径（限制：IE将显示它们为正方形）
b。渐变以使其像“按钮一样”（限制：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>

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

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

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

a标签内不能有按钮。您可以使用一些JavaScript使其正常运行。

如果您使用的是Twitter引导程序之类的框架，则可以简单地将“ btn”类添加到标签中-我刚刚接到了一个有关此问题的用户电话，显然我的结帐按钮无法正常工作，因为我在a内有一个按钮标签...相反，我只是向其中添加了btn类，它现在可以正常工作了。

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

我发现这对我有用

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

由于这只是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}

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

我在IE9上测试过，效果还不错。

这里的问题是，即使更改z-index，链接也位于按钮后面。此标记也是无效的（请阅读规范）。因此，链接不起作用的原因是因为您实际上是在单击按钮而不是链接。解决方案是改变您的标记。

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

然后根据需要设置样式。一个演示在这里。

实际上，这非常简单，不需要javascript。

首先，将锚点放在按钮内

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

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

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

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

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

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

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