2016-03-01 157 views
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 &copy; Marin KapranoFF - 2016</h3> 
 
</footer> 
 
</html>

回答

1

錨表現不同的Firefox。我建議去掉<button>包裝,並用CSS樣式錨:

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

你一般不需要放置一個錨點按鈕,錨已經處理了點擊事件瀏覽你的HREF。

+0

非常感謝。你很容易解決它。我剛剛在這個網站上註冊了第一次,我在短短的10分鐘內就得到了答案。上帝保佑你) – Marin

+0

樂意幫忙,歡迎來到社區! – meverson

+1

沒錯。這不僅僅是因爲你不需要把'a's放在'button'裏面,它實際上被禁止嵌套交互式元素。在''''''裏面輸入',在'按鈕'裏面'選擇',全部關閉。如果你這樣做,你將會遇到互操作性問題。 –

相關問題