0

我有一个在 IE 8 和 Chrome 中都正确显示的 CSS 菜单。然而，在 Firefox 中，似乎添加了额外的填充并将最后一个菜单项推到下一行。

任何人都可以看看下面的内容并告诉我如何解决它。

下面的CSS：

#wrap {
    width: 920px;
    margin: 0 auto;
}

#cssmenu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size:10px;
    font-weight:bold;   
    }
#cssmenu ul{
    background:#333333;
    height:37px;
    list-style:none;
    margin:0;
    padding:0;
    border-bottom: 3px solid #2580a2;
    }
#cssmenu li{
    float:left;
    padding:0px;

    }
#cssmenu li a{
    background:#333333 url('images/seperator.gif') bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    line-height:37px;
    margin:0px;
    padding:0px 22px;
    text-align:center;
    text-decoration:none;
    }



#cssmenu li a:hover, #cssmenu ul li:hover a{
    background: #2580a2;
    color:#FFFFFF;
    text-decoration:none;
    }
#cssmenu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
    }
#cssmenu li:hover ul{
    display:block;

    }
#cssmenu li li {
    background:url('images/sub_sep.gif') bottom left no-repeat;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
#cssmenu li:hover li a{
    background:none;

    }
#cssmenu li ul a{
    display:block;
    height:35px;
    font-size:10px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
    background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }
#cssmenu p{
    clear:left;
    }

下面的 HTML：

<html>
<head>
<link href="menu_assets/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<div id='cssmenu'>
<ul>
   <li><a href='index.html'><span>HOME</span></a></li>
   <li class='has-sub'><a href='#'><span>OPERATIONS</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li class='last'><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>AIRWORTHINESS</span></a></li>
   <li><a href='#'><span>REGULATIONS AND POLICY</span></a></li>
   <li><a href='#'><span>MANUALS AND FORMS</span></a></li>
   <li><a href='#'><span>EDUCATION</span></a></li>
   <li><a href='#'><span>ABOUT CASA</span></a></li>
   <li id='cssmenulast'><a href='#'><span>SERVICES</span></a></li>
</ul>
</div>
</div>
</body>
</html>
4

3 回答 3

2

现在习惯display:inline-block;并在你的li中删除 float left

像这样 

#cssmenu ul{
white-space:nowrap;  // add this line
font-size:0;   // add this line
}

#cssmenu li{
float:left; // remove this line
display:inline-block; // add this line
vertical-align:top; // add this line
font-size:10px;
padding:0px;
}

现场演示

于 2013-03-12T04:08:04.957 回答
0

你可以用display: table这个。具有 100% 宽度的优势，并且可以按比例缩小以获得更小的分辨率。

#cssmenu ul
{
    display: table;
    width: 100%;
}

#cssmenu li
{
    display: table-cell;
    float: none;
}

#cssmenu li a
{
    padding: 0; /* use something like "0 10px" for more homogenous widths */
}

padding现在您可以通过使用of来调节项目宽度#cssmenu li a。有关示例，请参见此Fiddle。

于 2013-03-12T03:51:37.560 回答
0

你试过设置padding-start:0px 

#container {
 -moz-padding-start: 0px;    // firefox
 -webkit-padding-start: 0px; // safari
 padding-left: 0px;          // chrome
}

padding-start自动应用于<li>元素。

Mozilla 文档padding-start：https ://developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

更多关于 webkit-padding 的资源（也包括 webkit-margin 不包括 FF）：http ://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php

于 2013-03-12T03:05:51.443 回答