跨浏览器填充导航菜单

Question

填写导航跨浏览器的最佳方式是什么？看起来每个浏览器都有它的不同定义，所以当涉及到导航时，如何网站完全填充导航，特别是当涉及到导航动画时？

例如，如果我有一个容器将我的导航设置为1000px - 如何在我的列表项之间有效提供空间的同时动态填充该1000px？我创建了一个fiddle来表达我的问题。 Found Here。

我的代码看起来是这样的：

<div id="container"> 
     <ul> 
      <li class="first"><a href="javascript:void(0);">Home</a></li> 
      <li><a href="javascript:void(0);">About Us</a></li> 
      <li><a href="javascript:void(0);">Testimonials</a></li> 
      <li><a href="javascript:void(0);">Products</a></li> 
      <li><a href="javascript:void(0);">Blog</a></li> 
      <li><a href="javascript:void(0);">Something</a></li> 
      <li class="last"><a href="javascript:void(0);">Contact</a></li> 
     </ul> 
     <div style="clear:both"></div> 
    </div> 

和CSS这样的：

*      {margin: 0; padding: 0; border: 0;} 
#container    {margin: 0 auto; width: 1000px; background-color: #eee;} 
#container ul   {position: relative;} 
#container li   {float: left; list-style: none;} 
#container li a   {display: block; padding: 10px 44px; color: #000; border-left: 1px solid #000; border-right: 1px solid #000; text-decoration: none;} 
#container li.first a {border-left: 0;} 
#container li.last a {border-right: 0;} 

所以我目前使用的填充，它看起来不同于Chrome浏览器火狐或Firefox IE这样我如何使其具有普遍性？

Answer 1

对于导航菜单中的按钮，您始终可以使用dispaly:table-cell'。 然后只设置table-layout:fixed;。

下面是一个简单的例子：Fiddle DEMO

#container { 

    width:800px; 
} 
#container ul { 
    display:table; 
    width:100%; 
    table-layout:fixed; 
    border-collapse:collapse; 
} 
#container ul li { 
    display:table-cell; 
    border:1px solid black; 
    padding:10px; 
} 

浏览器兼容性：

其广泛的支持（我认为它足够的）来看看：caniuse.com/css-table

重要事项

1. 这是（CSS显示表规则）是CSS2 - 广泛支持。
2. table-layout属性将表格布局算法设置为用于表格。

3. 您可以通过设置显示器太行集太：display:table-row，还有更多：

   可用CSS2表型号：

   • 表{显示：表}
   • TR {显示：表行}
   • THEAD {显示：表头基}
   • TBODY {显示：表列的基团}
   • TFO OT {显示：表尺基}
   • COL {显示：表列}
   • COLGROUP {显示：表列的基团}
   • TD，第{显示：表单元}
   • 字幕{显示：表字幕}

4. 的更多信息：W3C - The CSS table model