Firefox添加额外的填充到CSS菜单

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

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

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>

来源

2013-03-12 sephiith

你能设置上的jsfiddle你的代码演示.net？你可以把你的HTML和CSS并保存为一个链接，你可以粘贴在这里。 – 2013-03-12 02:30:58

你在这里：http://jsfiddle.net/EHcZb/ – sephiith 2013-03-12 02:34:46

你有什么** ff **？ – jhunlio 2013-03-12 02:44:11

现在用于display:inline-block;和删除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; 
}

Live Demo

来源

2013-03-12 04:08:04

我有同样的问题和font-size：0;诀窍。 – noun 2013-12-14 19:44:25

你有没有尝试设置padding-start:0px

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

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

Mozilla的文档为padding-start：在WebKit的填充https://developer.mozilla.org/en-US/docs/CSS/-moz-padding-start

更多资源（还包括WebKit的利润率不包括FF）：http://www.css-101.org/articles/base-styles-sheet-for-webkit-based-browsers/index.php

来源

2013-03-12 03:05:51

我已经添加了该更改并且它没有执行任何操作。 – sephiith 2013-03-12 03:52:23

你有没有尝试在'#container ul {}'上申请？抱歉不能为你测试。无法从我的电脑中看到正在发生的事情。你能截取这个问题的截图吗？ – 2013-03-12 03:54:18

您可以使用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 */ 
}

现在你可以通过与#cssmenu li apadding发挥调节项宽度。有关示例，请参阅此Fiddle。

来源

2013-03-12 03:51:37

Firefox添加额外的填充到CSS菜单

回答

相关问题