Question

我遇到了这样的情况：宽度为33％，34％和33％的3个div与100％宽度的一个div相加的像素数不同。请考虑以下完整的html代码段：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>ios math test</title>
</head>
<body>
    <div style="width:100%; height:3em; background-color: green;"></div>
    <div style="width:33%; height:3em; float:left; background-color: red;"></div>
    <div style="width:34%; height:3em; float:left; background-color: red;"></div>
    <div style="width:33%; height:3em; float:left; background-color: red;"></div>
</body>
</html>

您会注意到iphone，ipads甚至IOS的某些桌面实例上的safari将显示100％的div比其下方div的宽度总和更长。这看起来很奇怪，或者暗示我对宽度如何工作的理解是有缺陷的，或者IOS正在弄乱我们的脑袋。

我测试过的所有苹果设备都表现出这种行为（在Mac上进行野生动物园游戏，在ipad上进行野生动物园游戏，在iphone上进行野生动物园游戏，在ipad上进行游戏，在ipad上进行镀铬，在iphone上使用Chrome等等）。在Windows框中使用chrome，或在Windows框上使用safari或android时，它不会出现此行为。

这是一个jsfiddle：http://jsfiddle.net/zd6wx/

在IOS设备（safari，chrome等等）上表示这一点的正确方法是什么，它也可以在其他设备上正确呈现（例如... android）？我不想使用表格，我只想使用javascript作为最后的选择。

由于

Answer 1

您需要包含box-sizing属性。要覆盖所有浏览器，请使用：

 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;   
  box-sizing: border-box;

查看实际操作：http://jsfiddle.net/5gfdZ/1/

Answer 2

嗯......可能是由Safari Mobile的计算风格引起的。

您可以尝试像这样设置重置规则吗？

<style>
    div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, span, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
        vertical-align: baseline;
        text-decoration: none;
        font-size: 100%;
        font-family: arial, sans serif;
        color: black;
        line-height: normal;
    }
</style>

希望它有所帮助！

在iOS上，33％+ 33％+ 34％与100％的宽度不同

2 个答案: