锚链接内的按钮在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>元素.

"交互式元素按钮不得作为元素的后代出现." 资料来源:http://www.w3.org/TR/html-markup/button.button.html#button.button

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

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

但请考虑不要这样做; 常规链接的工作原理如下:

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

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

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

Answer 2

只需注意:
W3C对链接标记内的按钮没有问题,因此它只是另一个MS子标准.

答:
使用代理按钮,除非您想要获取完整图像.

代理按钮可以放入标签(更安全,如果你使用跨度,而不是div).

它的样式可以看起来像按钮或其他任何东西.

它是多功能的 - 一段css代码为所有实例提供支持 - 只需定义一次CSS,从那时起只需复制并粘贴html实例,只要你的代码需要它.

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

将其宽度调整为标签长度 - 如果您想要它,也可以采用固定宽度.
IE7是上面的一个例外 - 它必须有宽度,或者将这个按钮从边缘到边缘 - 或者给它宽度,你可以浮动按钮左
- css为IE7:
一个..WIDTH:150像素; (注意属性前的点,我通常通过添加这样的点来定位IE7 - 删除点和属性将被所有浏览器读取)
b.文本对齐:中心; - 如果你有固定的宽度,你必须将它放在文本/标签
c的中心.光标:指针; - 所有IE必须有这个才能正确显示链接指针 - 好的浏览器不需要它

您可以使用此代码前进并使用CSS3来设置它,而不是使用图像:
a.圆角的半径(限制:IE将显示它们的正方形)
b.渐变使其成为"按钮状"(限制:opera不支持渐变,所以请记住为此浏览器设置标准背景颜色)
C.使用:悬停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 3

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

Answer 4

以下代码适用于所有浏览器:

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

Answer 5

a标签内不能有按钮.你可以做一些javascript来使它工作.

Answer 6

如果你正在使用类似Twitter引导程序的框架,你可以简单地将类"btn"添加到一个标签 - 我只是有一个关于这个问题的用户电话显然我的结账按钮没有工作,因为我有一个按钮里面的一个标签...相反,我只是添加了btn类,它现在完美地工作..大错,一个可能花费客户 - 我有时忘记编码检查一切在IE中工作..

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

Answer 7

我发现这对我有用

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

Answer 8

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