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

标签 html css twitter-bootstrap mobile

我正在开发一个 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如果这对你可行的话。

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

关于html - 移动横向 View 使我的 20% 大小的 css div 不等于 40% 大小的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33148197/

相关文章:

html - 需要 wordpress 插件

javascript - 根据单选按钮通过 'onclick' 选定的选项重定向到页面,没有 'submit' php 中的表单

css - 为什么溢出: hidden add additional height to an inline-block element?

html - 在 Bootstrap Carousel 中随着浏览器宽度的减小裁剪图像边

html - 部署后 CSS 样式未显示在 GitHub 上

javascript - CSS更改动画持续时间而不跳转

ios - React Bootstrap OverlayTrigger with trigger ="focus"bug work around

html - Bootstrap 导航栏中的链接表现不同

html - css 转换完成后延迟隐藏元素

css - icheck 多色模式