0
在我的網站strongape.com，Firefox的頂部和底部邊框不對齊，導航菜單略有重疊。有人可以幫我調試嗎？謝謝。這是我的css文件：CSS邊框和導航菜單高度不同在Firefox和Chrome
html{
height: 100%;
}
body {
padding-top: 50px;
height: 100%;
font-family: Verdana, Helvetica, Arial;
margin-bottom: 100%;
margin-top: 0px;
font-size: 14px;
/* fallback (Opera) */
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #617C58, #00FFFF);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#617C58), to(#00FFFF));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#617C58', EndColorStr='#00FFFF', GradientType=0);
}
#binder {
width: 65%;
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
background: url(/images/middle.png);
background-size: 100%;
-moz-background-size: 100%;
-webkit-background-size: 100%;
background-repeat:repeat-y;
font-size: 12px;
padding-bottom: 20px;
padding-top: 20px;
}
#top_bar {
width: 65%;
margin-left: auto;
margin-right: auto;
padding-right: 10%;
padding-left: 10%;
margin-bottom: 0px;
margin-top: 0px;
padding-bottom: 30px;
padding-top: 0px;
background: url(/images/top_and_bottom_bar.png);
-moz-background-size: 100%;
-webkit-background-size: 100%;
-moz-border-radius-topright: 25px 50px;
-webkit-border-top-right-radius: 25px 50px;
border-top-right-radius: 25px 50px;
}
#bottom_bar {
width: 65%;
margin-left: auto;
margin-right: auto;
padding-right: 10%;
padding-left: 10%;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 30px;
background: url(/images/top_and_bottom_bar.png);
-moz-background-size: 100%;
-webkit-background-size: 100%;
-moz-border-radius-bottomright: 25px 50px;
-webkit-border-bottom-right-radius: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
/* Navigation Tabs http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html */
/* http://www.cuberick.com/2010/05/simple-tabbed-navigation-in-rails.html */
.menu {
margin-left: 30%;
margin-bottom: 57px;
}
.menu ul {
list-style:none;
}
.menu ul li {
display:inline;
float:left;
}
/* :first-child pseudo selector with rounded top left corner */
.menu ul li:first-child a {
-moz-border-radius-topleft: 12px;
-webkit-border-top-left-radius:12px;
}
/* :last-child pseudo selector with rounded top right corner */
.menu ul li:last-child a {
-moz-border-radius-topright: 12px;
-webkit-border-top-right-radius:12px;
}
/* background color set to RGBA, with opacity on 0.3 and also using text-shadow */
.menu ul li a {
padding:20px;
background: rgba(255,138,30,0.3);
text-decoration: none;
font: bold 20px Helvetica, Sans-Serif;
letter-spacing: -1px;
color: #402e16;
text-shadow: #eee 0px 0px 2px;
}
/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey shadow on top */
.menu ul li a:hover {
-moz-box-shadow: 0 -5px 10px #777;
-webkit-box-shadow: 0 -5px 10px #777;
background: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important;
background: -moz-linear-gradient(right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important;
background-color:rgb(255,173,10) !important;
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}
/* another RGBA background, now with an opacity of 0.8 */
.menu ul li a.active {
background: rgba(255,138,30,0.8) !important;
}
#bottom {
padding-top: 12px;
font-size: 12px;
text-align: center;
}
.homepage {
width: 100%;
font-size: 24pt;
}
.homepage_border {
border-style: none;
border-width: 1px;
}
.top_border{
border-width: 1px;
border-style: solid;
border-bottom: none;
border-right: none;
border-left: none;
margin-left: -1em;
margin-right: 1em;
}
這裏是HTML。如果更容易，您可以在網站上查看源代碼。再次感謝。
<!DOCTYPE html>
<html>
<head>
<title>StrongApe</title>
<link href="/stylesheets/application.css?1308946065" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery-ui-1.8.4.custom.css?1299304515" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/application.js?1309552670" type="text/javascript"></script>
<script src="/javascripts/jquery.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script>
<link href="/stylesheets/application.css?1308946065" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery-ui-1.8.4.custom.css?1299304515" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.6.1.min.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/jquery-ui-1.8.4.custom.min.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/jquery.cluetip.min.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script>
<script src="/javascripts/jquery.flot.pack.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/jquery.flot.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/jquery.flot.resize.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/excanvas.pack.js?1308722519" type="text/javascript"></script>
<script src="/javascripts/excanvas.min.js?1308722519" type="text/javascript"></script>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="pf43on62OPA7k0rJbvtBiw6wyrdmbJTpauHcH48Jz9I="/>
<div class="menu">
<ul>
<li>
<a href="/home/index" class="active">Home</a></li>
<li>
<a href="/athletic_programs" class="">Workout Routines</a></li>
<li>
<a href="/date_of_workouts" class="">Workout Log</a></li>
<li>
<a href="/home/about" class="">About</a></li>
<!--<li>
<a href="/metrics" class="">Health</a></li>-->
</ul>
</div>
</head>
<body>
<div id="top_bar"></div>
<div id="binder">
<div class="hmenu">
<a href="https://stackoverflow.com/users/sign_up">Register</a>
<a href="https://stackoverflow.com/users/sign_in">Login</a>
</div>
<p id="notice"></p>
<p id="alert"></p>
<img alt="StrongApe" id="gorilla" src="/images/banner.png?1299304515" />
<table class="homepage">
<tr>
<th class="header1"><a href="https://stackoverflow.com/users/sign_up">Register</a></th>
<th class="header1"><a href="https://stackoverflow.com/users/sign_in">Login</a></th>
</tr>
</table>
<table class="homepage">
<tr>
<tr>
<th class="header2">Fitness Routines</th>
</tr>
<tr>
<td class="homepage_border">
<li>Fully Customizable</li>
<li>Printable</li>
<li>Save and Share with Anyone</li>
<!--<>Quickly Email</li>-->
</td>
</tr>
<tr>
<th class="header1"><a href="/athletic_programs">Create or Find a Workout Routine</a></th>
</tr>
</tr>
<tr>
<tr>
<th class="header2">Fitness Log</th>
</tr>
<tr>
<td class="homepage_border">
<li>Track Progress</li>
<!--<>Use from Mobile</li>
<li>Track Any Variable</li>
<li>Graph Progress</li>-->
</td>
</tr>
<tr>
<th class="header1"><a href="/date_of_workouts">Log Your Activity</a></th>
</tr>
</tr>
</table>
</div>
<div id="bottom_bar"></div>
</body>
</html>
我們還需要HTML。如果你還沒有這樣做，你應該從上面消除不涉及導航的CSS。 –
我添加了HTML並刪除了不相關的CSS。謝謝。 – Todd