Firefox与Chrome的CSS边框和导航菜单高度不同

时间：2011-07-01 20:25:49

标签： html css

在我的网站strongape.com中，firefox顶部和底部边框不对齐，导航菜单略有重叠。有人可以帮我调试吗？谢谢。这是我的css文件：

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="/users/sign_up">Register</a>

      <a href="/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="/users/sign_up">Register</a></th>

    <th class="header1"><a href="/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>

1 个答案:

答案 0 :(得分：1)

.menu { margin-bottom:0; }
.menu ul { margin:0; overflow:hidden; }
.menu ul li a { display:block; }

你有很多重复的CSS - 看起来你正在加载一些文件两次。

你的代码也很好，很不寻常。可能想重新考虑你的方法。

上面的修复肯定适用于FF5.0，但我还没有测试过Chrome的变化。 enter image description here

相关问题
最新问题