0

我使用 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>
4

4 回答 4

2

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

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

将按钮标签放在 a 标签内

另一个（和更好的做法）选项：

http://jsfiddle.net/a6seL/

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

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

请参阅我的 jsfiddle。

于 2012-06-14T19:34:11.717 回答
1

使用链接或按钮。将两者混合在一起并没有真正的意义。如果需要链接，请使用链接。如果你想要一个按钮，请使用一个按钮。

仅将按钮（或任何其他元素）用于样式目的是一种非常糟糕的做法。将您的 CSS 调整为语义化、有意义的 HTML。

此外，在 XHTML 1.0 中，您根本无法将 a<a>放入 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;)*">

来自XHTML 1.0 过渡 DTD（您正在使用）

于 2012-06-14T19:37:08.967 回答
0

我认为如果您将锚点包裹在按钮之外，它会正确，尽管我不是 100% 确定如何为按钮实现有效的墨水

于 2012-06-14T19:34:29.500 回答
0

你不能那样做，按钮不是重定向，你可以创建一个链接，让它看起来像一个带有 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>
于 2012-06-14T19:38:17.360 回答