css將元素向下推入Firefox和IE

Question

基本上，我有一個導航欄。當按鈕全部顯示在屏幕上時，剩下的空間被填充一個通用的div。

在鉻上，這個工作正常。又如，你會在頂部看到一個整潔的酒吧。

在Firefox或IE上，它會被放下一點。請參閱ff或IE中的小提琴，例如我的意思，如果不明顯，請參閱我想要的內容。謝謝！

http://jsfiddle.net/yKKUq/2/

我有一個簡單的標題

  <div style="width: 100%; min-height: 50px;"> 
       <ul id="navlist"> 
        <li><a>Button</a> 

        </li> 
        <li><a>Button</a> 

        </li> 
       </ul> 
       <div id="navlistfiller" style=""></div> 
      </div> 

與CSS：

ul#navlist { 
    padding:10px; 
    font: bold 12px Arial, sans-serif; 
    display: inline; 
} 
ul#navlist li { 
    float:left; 
    margin-right:20px; 
    display:inline-block; 
    zoom:1; 
    position:relative; 
    width:108px; 
    height: 50px; 
    list-style: none; 
    color:#757575; 
} 
ul#navlist li a { 
    display: inline-block; 
    vertical-align: middle; 
    text-decoration:none; 
    padding:5px 10px; 
    width:95px; 
    height: 40px; 
} 

ul#navlist li a { 
    background:red; 
} 
ul#navlist li a:hover { 
    background:#EAEFF2; 
} 
ul#navlist li a.current-menu-item { 
    color:#fff; 
    background:#333366; 
} 
ul#navlist li a.current-menu-item:hover { 
    background:#EAEFF2; 
} 
#navlistfiller { 
    margin-left: 250px; 
    height: 50px; 
    background-color: green; 
    vertical-align: top; 
} 
html { 
    background-color: white; 
    margin: 0; 
    padding: 0; 
} 
body { 
    min-width: 1200px; 
    background-color: #fff; 
    color: #333; 
    font-size: .85em; 
    font-family:"Segoe UI", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding: 0; 
} 

Answer 1

只需從ul取出padding：

ul#navlist { 
    font: bold 12px Arial, sans-serif; 
    display: inline; 
} 

這是你的演示：

http://jsfiddle.net/yKKUq/3/

Answer 2

添加以下CSS來#navlistfiller

顯示：inline-block的;寬度：108px;

並刪除margin-left：250px;