Question

我使用HTML / CSS和Java脚本创建了一个按钮。该按钮应该将某人引导到不同的页面，但它不起作用。它在Chrome和Safari中运行良好，但在Firefox中不起作用。

任何人都可以帮助代码，以便它可以在Firefox和IE中使用吗？

感谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <title>WTF</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">


button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

</style>

<body>

<button><a href="http://www.ihatelebronjames.com" class="button1">LEBRON IS A NO-GOOD, BACK-STABBING, AFRAID-OF-THE-MOMENT CHOKE ARTIST!</a></button><br>
<button><a href="http://www.lebronjames.com" class="button2">LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</a></button>            


</body>

</html>

Answer 1

一个非常简单的解决方法是：

<a href="http://www.lebronjames.com" class="button2"><button>LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</button></a>

将按钮标签放在标签内

另一种（更好的做法）选择：

http://jsfiddle.net/a6seL/

这里我们只是向<a>添加一个“button2”类。然后我们就像使用<button>一样设置样式，但为了真正获得按钮外观，我们还将display : block添加到类中。

现在您只需要<a>而不再需要<button>。

请参阅我的jsfiddle。

Answer 2

使用链接或按钮。将两者混合起来并没有多大意义。如果您想要链接，请使用链接。如果需要按钮，请使用按钮。

使用按钮（或任何其他元素）仅用于造型目的是非常糟糕的做法。将CSS调整为语义，有意义的HTML。

此外，在XHTML 1.0中，您无法将<a>放入<button>：

<!-- button uses %Flow; but excludes a, form and form controls -->

<!ENTITY % button.content    "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
    table | %special; | %fontstyle; | %phrase; | %misc;)*">

来自the XHTML 1.0 Transitional DTD（您正在使用）

Answer 3

我认为如果你把锚子包在按钮之外它会正常，虽然我不是100％确定如何为按钮实现有效的墨水

Answer 4

你不能这样做，按钮不是重定向，你可以创建一个链接，使它看起来像一个CSS按钮，或者你可以创建一个按钮，并给它JS功能，如下所示：

<button onclick="self.location=('http://www.ihatelebronjames.com');">LEBRON IS A NO-GOOD, BACK-STABBING, AFRAID-OF-THE-MOMENT CHOKE ARTIST!</a></button><br>
<button onclick="self.location=('http://www.lebronjames.com');">LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</a></button>

按钮不会在Firefox或IE中单击

4 个答案: