锚链接中的按钮在 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>
101985 次浏览
小开

你不能在 a标签中有一个按钮。你可以做一些 javascript 来使它工作。

小开

在 <a>元素中不能有 <button>:

“不能有互动内容的后代”

(一个 <button>被认为是 互动内容)

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

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

请考虑 没有这样做，但是，有一个原因，常规链接工作，因为他们这样做:

  • 用户可以立即识别链接，并理解他们导航到其他页面
  • 搜索引擎可以将它们识别为链接并跟踪它们
  • 屏幕阅读器可以将它们标识为链接，并适当地向用户提供建议

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

您可以设计您的链接，如果需要，使用背景图像或背景颜色，边框和其他技术，使他们 听着喜欢按钮，但在封面下，他们应该是普通的链接。

小开

下面的代码在所有浏览器中都能正常工作:

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

提醒你一下:
W3C 对于链接标签内部的按钮没有任何问题，所以它只是另一个 MS 次级标准。

回答 :
使用代理项按钮，除非您希望获得完整的图像。

可以将代理项按钮放入标记中(如果使用 span 而不是 div，则更安全)。

它可以设计成按钮的样式，或者其他任何样式 它是多才多艺的-一段 CSS 代码为所有实例提供动力-只需定义 CSS 一次，从那时起只需复制和粘贴 html 实例，只要你的代码需要它。< 商业登记 > < 商业登记 > 每个按钮都可以有自己的标签——非常适合多语言页面(我认为比每种语言的图片都要容易)——还可以更容易地在脚本中传播实例。< 商业登记 > < 商业登记 > 调整其宽度标签长度-也采取固定宽度，如果它是你想要的。
IE7是一个例外-它必须有宽度，或将使这个按钮从边缘到边缘-或给它宽度，你可以浮动按钮左 < BR >-css 为 IE7: < BR > 一个。宽度: 150px; (请注意点在属性之前，我通常通过添加这样的点删除点和属性将被所有浏览器读取的目标 IE7)
文本对齐: 居中;-如果你有固定的宽度，你必须有这个中心文本/标签
游标: 指针;-所有 IE 必须有这个显示链接指针正确-良好的浏览器不需要它

你可以继续使用这段代码并使用 CSS3来设计它，而不是使用图片:
圆角的半径(限制: IE 会显示正方形)
使它“像按钮一样”(限制: Opera 不支持渐变，所以记得为这个浏览器设置标准的背景颜色)
使用: 悬停 pclass 来改变按钮状态取决于鼠标指针的位置等-您可以应用到文本标签，或整个按钮 < BR >

下面的 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
小开

我发现这对我很有用

<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”> < form: form method = “ GET”action = “ home.do”> < input id = “ Back”class = “ sub _ but”type = “ commit”value = “ Back”/>

这是工作正常，我已经测试了它在 IE9。

小开

If you're using a framework like Twitter bootstrap you could simply add class "btn" to an a tag -- I just had a user call in about this problem apparently my checkout button wasn't working because I had a button inside an a tag... instead I just added the btn class to it and it works perfectly now.. Big mistake, one that probably cost customers -- and I sometimes forget to code check everything works in IE..

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

小开

这里的问题是链接位于按钮后面，即使在更改 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 的头部:

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

为什么不只是转换所有的 <button>到 <span>与 type="button"，然后样式与您的正常 css 按钮类？刚刚确认了这在 IE11中是可行的。


提交答案