链接在FIrefox中不起作用，但在chrome中它完美无缺

Question

人。我的链接在firefox上无法正常工作，但在chrome上它们很好。我已经尝试过这里的所有提示，但没有任何帮助。我无法找到问题。我试图删除#position：relative＃，我也试图改变#z-index＃。我不明白，因为在Chrome中它运行得很好，但Firefox。

＆＃13;

＆＃13;

table
 {
	border-collapse: collapse;
	border-spacing: 0;
}

a
{
	text-decoration:none;
	color:black;
	transition-duration:1s;
}

body,div
{
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 
{
	font-size: 100%;
	font-weight: normal;
}
/*-------Resets above-----*/

/*-----Styles for Html website-----*/
#wrapper
 {	
	width: 100%;
	height:100%;
	background:linear-gradient(#6699ff,#99ccff,#ccffff);
	margin-left: auto;
	margin-right:auto;
	overflow:hidden;
 }
#logo
{	
	
	font-size: 40px;
	font-weight:bold;
	font-family:Impact, Charcoal, sans-serif;
	font-style:italic;
	width:1200px;
	height:70px;
	margin-right:auto;
	margin-left:auto;
	text-align:left;
}

.button 
{
	position: relative;
	margin-top: 380px;
	margin-left:1100px;
	width:150px;
	height:75px;
	z-index:1;
	background-image:url('images/new_year_background');
	border-radius:20px;
	border:2px solid #33ff99;
	font-size: 20px;
	transition-duration: 1s;
    cursor: pointer;
	text-decoration:none;
}
 .button:hover 
{	
	background-color:#33ffff;
}
.button a:hover 
{
    cursor: pointer;
	color:white;
}
/*--------navigation and buttons-----------*/
nav
{	
	position: relative;
	margin-top:30px;
	margin-right:75px;
	z-index:1;
}
.menu1
{
	margin-left:auto;
	margin-right:auto;
	width:1350px;
}
.button1
{
	height:50px;
	width:100px;
	background-color:#33ff66;
	cursor:pointer;
	border:1px solid #00cc66;
	color:white;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	display:inline-block;
	transition-duration:1s;
	float:right;
	border-radius:10px 0 0 10px;
}

.button3
{
	height:50px;
	width:100px;
	background-color:#33ff66;
	cursor:pointer;
	border:1px solid #00cc66;
	color:white;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	display:inline-block;
	transition-duration:1s;
	float:right;
	border-radius:0 10px 10px 0;
}

.button2
{
	height:50px;
	width:100px;
	background-color:#33ff66;
	cursor:pointer;
	border:1px solid #00cc66;
	color:white;
	font-size:15px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	display:inline-block;
	transition-duration:1s;
	float:right;
}
.button1:hover
{
	background-color:#99ff66;
}
.button1 a:hover
{
	color:white;
}
.button2:hover
{
	background-color:#99ff66;
}
.button2 a:hover
{
	color:white;
}
.button3:hover
{
	background-color:#99ff66;
}
.button3 a:hover
{
	color:white;
}
/*------End of the navigation-----*/
#first
{
	border-radius:20px;
	position: relative;
	width: 1300px;
	height:500px;
	background-image:url('images/symphony.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:10px;
	border: 2px solid #3366ff;

	
}
#sec
{	
	color:red;
	border-radius:20px;
	position:relative;
	width: 1300px;
	height:500px;
	background-image:url('images/new_year_background.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:20px;
	border: 2px solid #3366ff;
}
#tre
{
	border-radius:20px;
	position:relative;
	width: 1300px;
	height:500px;
	background-image:url('images/swirl_pattern.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:20px;
	border: 2px solid #3366ff;
}
#quad
{
	border-radius:20px;
	position:relative;
	width: 1300px;
	height:500px;
	background-image:url('images/logo_x_pattern.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:20px;
	border: 2px solid #3366ff;
}
#fiv
{
	border-radius:20px;
	position:relative;
	width: 1300px;
	height:500px;
	background-image:url('images/ignasi_pattern_s.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:20px;
	border: 2px solid #3366ff;
}
#sex
{
	border-radius:20px;
	position:relative;
	width: 1300px;
	height:500px;
	background-image:url('images/confectionary.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:20px;
	border: 2px solid #3366ff;
}
#sev
{
	border-radius:20px;
	position:relative;
	width: 1300px;
	height:500px;
	background-image:url('images/restaurant.png');
	margin-left: auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:20px;
	border: 2px solid #3366ff;
}
footer  h3
{
	width:100%;
	text-align:center;
}

＆＃13;

<!doctype html>
<html>
<head>  
	<title>My Guide to Success</title>
	<meta charset="utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; scale=1" />
	<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
	<div id="wrapper">
	
	<div class="menu1">
		<nav>
			<button class="button3"><a href="#">Fith</a></button>
			<button class="button2"><a href="#">Fourth</a></button>
			<button class="button2"><a href="#">Third</a></button>
			<button class="button2"><a href="#">Second</a></button>
			<button class="button1"><a href="#">First</a></button>
		</nav>
	</div>
	
		<div id="logo"><h1><a href="#sev">My Guide To Success</a></h1></div>
		<div id="first"><button class="button"><a href="#sec"><h2>Next Step</h2></a></button></div>
		<div id="sec"><button class="button"><a href="#tre"><h2>Next Step</h2></a></button></div>
		<div id="tre"><button class="button"><a href="#quad"><h2>Next Step</h2></a></button></div>
		<div id="quad"><button class="button"><a href="#fiv"><h2>Next Step</h2></a></button></div>
		<div id="fiv"><button class="button"><a href="#sex"><h2>Next Step</h2></a></button></div>
		<div id="sex"><button class="button"><a href="#sev"><h2>Next Step</h2></a></button></div>
		<div id="sev"><button class="button"><a href="#logo">To Top</a></button></div>
	</div>
</body>
<footer>
<h3>Copyright &copy; Marin KapranoFF - 2016</h3>
</footer>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

按钮内部的锚点在Firefox中表现不同。我建议删除<button>包装器并使用CSS设置锚点样式：

<div id="first">
    <a href="#sec" class="your-button-styles"><h2>Next Step</h2></a>
</div>

您通常不需要在锚点内放置按钮，锚点已经处理了点击事件以导航您到href。