【发布时间】：2012-09-14 16:22:30
【问题描述】：
我正在为客户开发一个移动网站，但我的幻灯片方法存在问题，如下所示：
100% 宽度的包装容器，溢出：隐藏，位置：相对
此容器内的一个ul，宽度为(#children*100)%，位置：相对
宽度为 (100/#li)% 的可变 lis 数，向左浮动，每个包含宽度为：100% 的图像
对于每次迭代，ul 的 'left' 属性减少 100%
这种方法在桌面浏览器和移动 safari 上效果很好，但是 android 浏览器对浮动百分比的处理很差，导致它们呈现不正确。我无法确定，但似乎当我将 100/6 = 16.66666667% 的宽度应用于 li 时，它会呈现为 16%，即使当我通过 javascript 查询该元素的宽度时，它也会返回正常的截断16.6667% 宽度。结果是，随着幻灯片的每次迭代，图像变得越来越不居中，因为它们没有在包装容器中占据正确的空间。
有趣的是，当我将元素的数量减少到一个可以整除 100 的数字时，比如 100/5 = 20%，这个问题就完全消失了。
我查看了以前有关像素舍入的线程，但我认为这不是问题所在。据我所知，当像素的计算有余数并且浏览器必须将结果四舍五入到最接近的像素时，就会发生像素舍入，这似乎是浏览器不了解小数百分比的问题。
还有其他人遇到过这样的问题吗？
【问题讨论】：
标签： javascript android css rendering