html - 移动横向 View 使我的 20% 大小的 css div 不等于 40% 大小的 div

Question

我正在开发一个 HTML5 跨平台移动应用程序。我使用的是 Bootstrap 3 进行设计，但对于具体问题它与它无关。这是问题所在:

我有一个行 div 列表，每个行都有一个 col-xs-2 标题 div 和一个 col-xs-10 内容 div。在内容 div 中，我根据百分比手动放置各种宽度的 div，但在大多数情况下它是 20%、40%、60%、80% 或 100%。一切正常，直到我将手机旋转到横向 View 。只有在某些设备上(!)，一个 40% 的 div 的宽度与两个 20% 的 div 的总宽度之间存在 1px 的差异。一个 20% 的 div 被计算为 89px 宽，而一个 40% 的 div 被计算为 179px。 40% 的 div 应该是 178px。

我该怎么办？对我来说重要的是 div 在完全相同的点开始和结束。这 1px 的差异是致命的。而且它只出现在某些设备上(Android 和 iOS)。我想这与实际显示大小有关，但这并不能导致浏览器错误计算 40% 和 2 * 20%。不管怎样，你有什么建议？

谢谢!!

Answer 1

您遇到的问题是因为小数像素的舍入方式不同...

由于不能将一个像素切成两半，因此浏览器需要决定如何处理奇数像素的 50%。不过，没有什么可做的。你可以使用 flexbox如果这对你可行的话。

这是一本好书:http://cruft.io/posts/percentage-calculations-in-ie/