Question

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

例如，如果我有一个容器，我的导航设置为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或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

重要提示

那是（css显示表规则）是CSS2 - 广泛支持。
table-layout属性设置用于表的表格布局算法。
您也可以通过设置显示来设置行：display:table-row等等：

可用的CSS2表型号：
- table {display：table}
- tr {display：table-row}
- thead {display：table-header-group}
- tbody {display：table-row-group}
- tfoot {display：table-footer-group}
- col {display：table-column}
- colgroup {display：table-column-group}
- td，th {display：table-cell}
- caption {display：table-caption}
更多信息：W3C - The CSS table model

跨浏览器填充导航菜单

1 个答案: