css - Safari 中的框大小不规则

Question

我很难获得 <ul>在 safari 中平均分配，以便内联 <li>元素占宽度的 100%。

html代码基本上是:

<ul>
    <li>red</li>
    <li>blue</li>
    <li>green</li>
    <li>orange</li>
    <li>purple</li>
</ul>

使用 CSS:

ul {
   list-style: none;
   margin: 0;
   padding: 0;
   width: 500px;
   background-color: #9999ff;
}
li {
   text-align: center;
   text-decoration: none;
   display: inline-block;
   border-left: 1px solid #000;
   width: 20%;
   box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
li:last-child {
   border-right: 1px solid #000;
}

这似乎会使 5 个均匀分布的列表元素占据总宽度的 20%(包括边框)。在 Firefox 和 Chrome 中完美运行，但 Safari 在最后留下了额外的 6 像素左右。当我删除 box-sizing 属性时，列表变得太长。我似乎无法让这个简单的东西为我的生活工作。

这是 JSFiddle:http://jsfiddle.net/z2Xdf/7/

Answer 1

它在 Chrome 中为我呈现错误的方式......至少使用 jsFiddle。

行内 block 在两侧放置一些空白。从 li display:inline block 中移除并添加

display:block;
float:left;

此外，将您的背景颜色从 ul 移动到 li。

如果你想保留 display:inline-block，你显然可以这样做......

<ul><!-
    -><li>stuff</li><!-
    -><li>stuff</li><!-
-></ul>

但是打字似乎很麻烦？

更多"hacks" 在这里(查看评论)...