css - Safari 中的框尺寸边距

Question

使用此代码，JSFiddle.net/k7s6b ，除了 Safari(包括 iOS 上的 Safari)之外的所有现代浏览器中，顶部的三个按钮与底部的宽按钮完美对齐。

概念很简单:为了用三个细按钮填充 100% 的宽度，每个按钮的宽度为 33%，为中间按钮两侧的间隙留出 1%。

但是，在 Safari 中，100% 宽的按钮始终比组合的细按钮至少宽一个像素。

非常感谢任何想法、建议等。

这是我的 HTML:

<div class="buttons">
    <ul>
        <li><a href="./">Thin 1</a></li>
        <li><a href="./">Thin 2</a></li>
        <li class="last_in_list"><a href="./">Thin 3</a></li>
    </ul>
    <p class="wide_button">Wide</p>
</div>

这是我的 CSS(不包括 Eric Meyer 的 CSS Reset):

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.buttons {
    margin: 15px auto;
    text-align: center;
    width: 70%;
}
    .buttons ul { list-style: none outside none; }
        .buttons ul li {
            float: left;
            margin: 0 0.5% 0.5% 0;
            width: 33%;
        }
            .buttons ul li.last_in_list { margin-right: 0; }
            .buttons ul li a {
                background: #000;
                color: #fff;
                display: block;
                text-decoration: none;
            }

        .wide_button {
            background: red;
            clear: both;
            color: #fff;
            display: block;
            width: 100%;
        }

Answer 1

好吧，希望我不是唯一一个搜索了几个小时，然后终于发布了一个问题，并在发布几分钟后......偶然发现了答案的人。

问题是规范中的“亚像素”舍入差异和歧义导致浏览器之间缺乏一致性。

我对此布局的解决方案是简单地加宽按钮之间的间隙(这样任何差异都不会那么明显)并将最后一个按钮 float 到右侧。

对不起，如果我浪费了任何人的时间发布这个问题。希望这个答案能帮助其他人意识到框大小支持的当前限制。