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

Button inside of anchor link works in Firefox but not in Internet Explorer?

提问by Rob

Everything else in my site seems to be compatible with all browsers except for my links. They appear on the page, but they do not work. My code for the links are as follows-

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

<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="superHyman.html">
            <button style="width:120;height:25">Super Hyman</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>

回答by Rob

You can't have a <button>inside an <a>element. As W3's content model descriptionfor the <a>element states:

你不能<button>在<a>元素里面有一个。正如W3对<a>元素的内容模型描述所述：

"there must be no interactive content descendant."

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

(a <button>is considered interactive content)

（a<button>被认为是互动内容）

To get the effect you're looking for, you can ditch the <a>tags and add a simple event handler to each button which navigates the browser to the desired location, e.g.

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

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

Please consider notdoing this, however; there's a reason regular links work as they do:

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

• Users can instantly recognize links and understand that they navigate to other pages
• Search engines can identify them as links and follow them
• Screen readers can identify them as links and advise their users appropriately

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

You also add a completely unnecessary requirement to have JavaScript enabled just to perform a basic navigation; this is such a fundamental aspect of the web that I would consider such a dependency as unacceptable.

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

You can style your links, if desired, using a background image or background color, border and other techniques, so that they looklike buttons, but under the covers, they should be ordinary links.

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

回答by Jeffz

Just a note:
W3C has no problem with button inside of link tag, so it is just another MS sub-standard.

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

Answer:
Use surrogate button, unless you want to go for a full image.

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

Surrogate button can be put into tag (safer, if you use spans, not divs).

It can be styled to look like button, or anything else.

It is versatile - one piece of css code powers all instances - just define CSS once and from that point just copy and paste html instance wherever your code requires it.

Every button can have its own label - great for multi-lingual pages (easier that doing pictures for every language - I think) - also allows to propagate instances all over your script easier.

Adjusts its width to label length - also takes fixed width if it is how you want it.
IE7 is an exception to above - it must have width, or will make this button from edge to edge - alternatively to giving it width, you can float button left
- css for IE7:
a. .width:150px; (make note of dot before property, I usually target IE7 by adding such dot - remove dot and property will be read by all browsers)
b. text-align:center; - if you have fixed width, you have to have this to center text/label
c. cursor:pointer; - all IE must have this to show link pointer correctly - good browsers do not need it

You can go step forward with this code and use CSS3 to style it, instead of using images:
a. radius for round corners (limitation: IE will show them square)
b. gradient to make it "button like" (limitation: opera does not support gradients, so remember to set standard background colour for this browser)
c. use :hover pclass to change button states depending on mouse pointer position etc. - you can apply it to text label only, or whole button

代理按钮可以放入标签（更安全，如果您使用跨度，而不是 div）。

它可以设计为看起来像按钮或其他任何东西。

它是通用的——一段 css 代码支持所有实例——只需定义一次 CSS，从那时起只需复制和粘贴 html 实例，只要你的代码需要它。

每个按钮都可以有自己的标签 - 非常适合多语言页面（比为每种语言制作图片更容易 - 我认为） - 还允许更轻松地在整个脚本中传播实例。

将其宽度调整为标签长度 - 如果您想要它，也可以采用固定宽度。
IE7 是上面的一个例外——它必须有宽度，否则会使这个按钮从边缘到边缘——或者给它宽度，你可以向左浮动按钮
——IE7 的 css：
一种。.width:150px; （在属性之前记下点，我通常通过添加这样的点来定位 IE7 - 删除点和属性将被所有浏览器读取）
b。文字对齐：居中；- 如果你有固定的宽度，你必须用它来居中文本/标签
c。游标：指针；-所有IE必须有这个正确显示链接指针-好的浏览器不需要它

可以向前走一步，此代码和使用CSS3样式它，而不是使用图像：
一。圆角的半径（限制：IE 将显示它们为正方形）
b. 渐变使其“像按钮一样”（限制：opera 不支持渐变，因此请记住为此浏览器设置标准背景颜色）
C。使用 :hover pclass 根据鼠标指针位置等更改按钮状态 - 您可以仅将其应用于文本标签或整个按钮

CSS code below:

下面的 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 code below (button instance):

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

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

回答by Kalmár Gábor

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

回答by Chris H.

The code below will work just fine in all browsers:

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

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

回答by Daniel A. White

You cannot have a button inside an atag. You can do some javascript to make it work however.

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

回答by PatrickCurl

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

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

E.g. <a href="link.com" class="btn" >Checkout</a>

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

回答by lance

i found that this works for me

我发现这对我有用

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

回答by Francis Lewis

Since this is only an issue in IE, to resolve this, I'm first detecting if the browser is IE and if so, use a jquery click event. I put this code into a global file so it's fixed throughout the site.

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

if (navigator.appName === 'Microsoft Internet Explorer')
{
    $('a input.button').click(function()
    {
        window.location = $(this).closest('a').attr('href');
    });
}

This way we only have the overhead of assigning click events to linked input buttons for IE. note: The above code is inside a document ready function to make sure the page is completely loaded before assigning click events.

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

I also assigned class names to my input buttons to save some overhead when using IE so I can search for

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

$('a input.button')

instead of

代替

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

.

.

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

On top of all that, I'm also utilizing CSS to make the buttons look clickable when your mouse hovers over it:

最重要的是，当鼠标悬停在按钮上时，我还利用 CSS 使按钮看起来可点击：

input.button {cursor: pointer}

回答by Mani Deepak

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

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

This is works just fine I had tested it on IE9.

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

回答by lukeocom

The problem here is that the link sits behind the button, even when changing the z-index. This markup is also invalid (read the spec). So the reason the links dont work is because you are actually clicking the button and not the link. The solution is to change your markup around.

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

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

Then style as needed. A demo is here.

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