我正在开发一个 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%。不管怎样,你有什么建议?
谢谢!!
最佳答案
您遇到的问题是因为小数像素的舍入方式不同...
由于不能将一个像素切成两半,因此浏览器需要决定如何处理奇数像素的 50%。不过,没有什么可做的。你可以使用 flexbox如果这对你可行的话。
关于html - 移动横向 View 使我的 20% 大小的 css div 不等于 40% 大小的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33148197/