0
人。我的链接在Firefox上无法正常工作，但在Chrome上它们很好。我已经尝试了所有来自这里的提示，但没有任何帮助。我找不到问题。我试图删除#position：relative＃，我也试图改变＃z-index＃。我不明白，因为在Chrome中它工作得很好，但Firefox。内部按钮链接在FIrefox中不起作用，但在Chrome中它完美地起作用
table
{
\t border-collapse: collapse;
\t border-spacing: 0;
}
a
{
\t text-decoration:none;
\t color:black;
\t transition-duration:1s;
}
body,div
{
\t padding: 0;
\t margin: 0;
}
h1, h2, h3, h4, h5, h6
{
\t font-size: 100%;
\t font-weight: normal;
}
/*-------Resets above-----*/
/*-----Styles for Html website-----*/
#wrapper
{ \t
\t width: 100%;
\t height:100%;
\t background:linear-gradient(#6699ff,#99ccff,#ccffff);
\t margin-left: auto;
\t margin-right:auto;
\t overflow:hidden;
}
#logo
{ \t
\t
\t font-size: 40px;
\t font-weight:bold;
\t font-family:Impact, Charcoal, sans-serif;
\t font-style:italic;
\t width:1200px;
\t height:70px;
\t margin-right:auto;
\t margin-left:auto;
\t text-align:left;
}
.button
{
\t position: relative;
\t margin-top: 380px;
\t margin-left:1100px;
\t width:150px;
\t height:75px;
\t z-index:1;
\t background-image:url('images/new_year_background');
\t border-radius:20px;
\t border:2px solid #33ff99;
\t font-size: 20px;
\t transition-duration: 1s;
cursor: pointer;
\t text-decoration:none;
}
.button:hover
{ \t
\t background-color:#33ffff;
}
.button a:hover
{
cursor: pointer;
\t color:white;
}
/*--------navigation and buttons-----------*/
nav
{ \t
\t position: relative;
\t margin-top:30px;
\t margin-right:75px;
\t z-index:1;
}
.menu1
{
\t margin-left:auto;
\t margin-right:auto;
\t width:1350px;
}
.button1
{
\t height:50px;
\t width:100px;
\t background-color:#33ff66;
\t cursor:pointer;
\t border:1px solid #00cc66;
\t color:white;
\t font-size:15px;
\t font-family:Arial, Helvetica, sans-serif;
\t font-weight:bold;
\t display:inline-block;
\t transition-duration:1s;
\t float:right;
\t border-radius:10px 0 0 10px;
}
.button3
{
\t height:50px;
\t width:100px;
\t background-color:#33ff66;
\t cursor:pointer;
\t border:1px solid #00cc66;
\t color:white;
\t font-size:15px;
\t font-family:Arial, Helvetica, sans-serif;
\t font-weight:bold;
\t display:inline-block;
\t transition-duration:1s;
\t float:right;
\t border-radius:0 10px 10px 0;
}
.button2
{
\t height:50px;
\t width:100px;
\t background-color:#33ff66;
\t cursor:pointer;
\t border:1px solid #00cc66;
\t color:white;
\t font-size:15px;
\t font-family:Arial, Helvetica, sans-serif;
\t font-weight:bold;
\t display:inline-block;
\t transition-duration:1s;
\t float:right;
}
.button1:hover
{
\t background-color:#99ff66;
}
.button1 a:hover
{
\t color:white;
}
.button2:hover
{
\t background-color:#99ff66;
}
.button2 a:hover
{
\t color:white;
}
.button3:hover
{
\t background-color:#99ff66;
}
.button3 a:hover
{
\t color:white;
}
/*------End of the navigation-----*/
#first
{
\t border-radius:20px;
\t position: relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/symphony.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:10px;
\t border: 2px solid #3366ff;
\t
}
#sec
{ \t
\t color:red;
\t border-radius:20px;
\t position:relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/new_year_background.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:20px;
\t border: 2px solid #3366ff;
}
#tre
{
\t border-radius:20px;
\t position:relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/swirl_pattern.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:20px;
\t border: 2px solid #3366ff;
}
#quad
{
\t border-radius:20px;
\t position:relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/logo_x_pattern.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:20px;
\t border: 2px solid #3366ff;
}
#fiv
{
\t border-radius:20px;
\t position:relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/ignasi_pattern_s.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:20px;
\t border: 2px solid #3366ff;
}
#sex
{
\t border-radius:20px;
\t position:relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/confectionary.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:20px;
\t border: 2px solid #3366ff;
}
#sev
{
\t border-radius:20px;
\t position:relative;
\t width: 1300px;
\t height:500px;
\t background-image:url('images/restaurant.png');
\t margin-left: auto;
\t margin-right:auto;
\t margin-top:20px;
\t margin-bottom:20px;
\t border: 2px solid #3366ff;
}
footer h3
{
\t width:100%;
\t text-align:center;
}<!doctype html>
<html>
<head>
\t <title>My Guide to Success</title>
\t <meta charset="utf-8" />
\t <meta name="keywords" content="" />
\t <meta name="description" content="" />
\t <meta http-equiv="content-type" content="text/html; charset=utf-8" />
\t <meta name="viewport" content="width=device-width; scale=1" />
\t <link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
\t <div id="wrapper">
\t
\t <div class="menu1">
\t \t <nav>
\t \t \t <button class="button3"><a href="#">Fith</a></button>
\t \t \t <button class="button2"><a href="#">Fourth</a></button>
\t \t \t <button class="button2"><a href="#">Third</a></button>
\t \t \t <button class="button2"><a href="#">Second</a></button>
\t \t \t <button class="button1"><a href="#">First</a></button>
\t \t </nav>
\t </div>
\t
\t \t <div id="logo"><h1><a href="#sev">My Guide To Success</a></h1></div>
\t \t <div id="first"><button class="button"><a href="#sec"><h2>Next Step</h2></a></button></div>
\t \t <div id="sec"><button class="button"><a href="#tre"><h2>Next Step</h2></a></button></div>
\t \t <div id="tre"><button class="button"><a href="#quad"><h2>Next Step</h2></a></button></div>
\t \t <div id="quad"><button class="button"><a href="#fiv"><h2>Next Step</h2></a></button></div>
\t \t <div id="fiv"><button class="button"><a href="#sex"><h2>Next Step</h2></a></button></div>
\t \t <div id="sex"><button class="button"><a href="#sev"><h2>Next Step</h2></a></button></div>
\t \t <div id="sev"><button class="button"><a href="#logo">To Top</a></button></div>
\t </div>
</body>
<footer>
<h3>Copyright © Marin KapranoFF - 2016</h3>
</footer>
</html>
非常感谢。你很容易解决它。我刚刚在这个网站上注册了第一次，我在短短的10分钟内就得到了答案。上帝保佑你） – Marin
乐意帮忙，欢迎来到社区！ – meverson
没错。这不仅仅是因为你不需要把'a's放在'button'里面，它实际上被禁止嵌套交互式元素。在''''''里面输入'，在'按钮'里面'选择'，全部关闭。如果你这样做，你将会遇到互操作性问题。 –