Html 按钮不会在Firefox或IE中单击_Html_Css_Xhtml

Html 按钮不会在Firefox或IE中单击

html css

Html 按钮不会在Firefox或IE中单击,html,css,xhtml,Html,Css,Xhtml,我使用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"> <htm

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


世界跆拳道联盟
钮扣{
颜色：#08233e；
字体：2.4em Futura，“世纪哥特式”，AppleGothic，无衬线；
字体大小：70%；
填充：14px；
背景：url（overlay.png）repeat-x center#ffcc00；
背景色：rgba（255204,0,1）；
边框：1px实心#ffcc00；
-moz边界半径：10px；
-webkit边界半径：10px；
边界半径：10px；
边框底部：1px实心#9f9f；
-moz盒阴影：插入0 1px 0 rgba（255255,0.5）；
-webkit盒阴影：插入0 1px 0 rgba（255255,0.5）；
盒影：插入0 1px 0 rgba（255255,0.5）；
光标：指针；
}
按钮：悬停{背景色：rgba（255204,0,0.8）；}

一个非常简单的修复方法是：

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

将按钮标签放入a标签中

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

在这里，我们只需向

添加一个类“button2”。然后，我们像您使用

一样对其进行样式设置，但为了真正获得按钮外观，我们还向类中添加了

display:block

现在您只需要

，不再需要

请参阅我的JSFIDLE。

一个非常简单的修复方法是：

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

将按钮标签放入a标签中

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

在这里，我们只需向

添加一个类“button2”。然后，我们像您使用

一样对其进行样式设置，但为了真正获得按钮外观，我们还向类中添加了

display:block

现在您只需要

，不再需要

请参阅我的JSFIDLE。

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

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

使用链接或按钮。把两者混为一谈是没有意义的。如果您想要链接，请使用链接。如果你想要一个按钮，就用一个按钮

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

此外，在XHTML1.0中，您不能将

（您正在使用的）
放在链接或按钮上。把两者混为一谈是没有意义的。如果您想要链接，请使用链接。如果你想要一个按钮，就用一个按钮
仅出于造型目的使用按钮（或任何其他元素）是一种非常糟糕的做法。将CSS调整为语义上有意义的HTML
另外，在XHTML 1.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>    

勒布朗是一个不好的、暗箭伤人的、害怕一时窒息的艺术家

勒布朗是篮球完美的巅峰！
你不能这样做，按钮不是重定向，你可以创建一个链接，让它看起来像一个带有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>    

勒布朗是一个不好的、暗箭伤人的、害怕一时窒息的艺术家

勒布朗是篮球完美的巅峰！
看起来很管用。正如我正在努力学习的，你能解释一下为什么这样做吗？看起来是这样的。正如我正在努力学习的，你能解释一下为什么这样做吗？