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菜單

回答

相關問題