我遇到这样一种情况，即 3 个宽度分别为 33%、34% 和 33% 的 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、iPad 甚至某些 IOS 桌面实例上的 Safari 会显示 100% 的 div 比其下方 div 的宽度总和还要长。这看起来很奇怪，或者表明我对宽度如何工作的理解存在缺陷，或者 IOS 正在扰乱我们的头脑。
我测试过的所有苹果设备都表现出这种行为(macbook 上的 safari、ipad 上的 safari、iphone 上的 safari、ipad 上的 chrome、iphone 上的 chrome 等等)。在 Windows 框上使用 chrome、在 Windows 框上使用 safari 或 android 时，它不会表现出这种行为。
这是一个 jsfiddle:http://jsfiddle.net/zd6wx/
在 IOS 设备(safari、chrome 等...)上表示它的正确方法是什么，它也能在其他设备(例如...android)上正确呈现？我不想使用表格，我只想使用 javascript 作为最后的选择。
谢谢
最佳答案
您需要包含 box-sizing 属性。要覆盖所有浏览器，请使用:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
查看实际效果:http://jsfiddle.net/5gfdZ/1/
关于html - 33% + 33% + 34% 与 iOS 上的 100% 宽度不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23545153/