跨瀏覽器填充導航菜單

Question

填寫跨瀏覽器導航的最佳方法是什么。 似乎每個瀏覽器都有不同的Padding定義，所以在導航方面，網站如何完整填寫導航，尤其是在導航動畫方面？

例如，如果我有一個將導航設置為1000px的容器-如何在有效地在列表項之間提供空間的同時動態填充該1000px？ 我創建了一個小提琴來表達我的問題。 在這里找到 。

我的代碼如下所示：

<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或從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. CSS2是CSS的顯示表格規則-廣泛支持。
2. table-layout屬性設置用於表的表布局算法。

3. 您也可以通過設置顯示來設置行： display:table-row等：

   可用的CSS2表模型：

   • 表{顯示：表}
   • tr {display：table-row}
   • thead {display：table-header-group}
   • tbody {display：table-row-group}
   • tfoot {顯示：table-footer-group}
   • col {display：table-column}
   • colgroup {顯示：table-column-group}
   • td，th {display：table-cell}
   • 字幕{顯示：table-caption}

4. 詳細信息： W3C-CSS表模型