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重置）：

*, *: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

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

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

我对此布局的解决方案只是扩大按钮之间的间隙（以便任何差异都不那么明显）并将最后一个按钮浮动到右侧。

很抱歉，如果我浪费了任何人发布此问题的时间。希望这个答案有助于让其他人了解当前盒装大小支持的限制。

Safari中的Box-sizing边距

1 个答案: