3

我正在为客户开发一个移动网站,但我的幻灯片方法存在问题,如下所示:

  • 一个 100% 宽度的包装容器,溢出:隐藏,位置:相对

  • 此容器内的 ul 宽度为 (#children*100)%, position:relative

  • 宽度为 (100/#li)% 的可变数量的 lis,向左浮动,每个包含宽度为:100% 的图像

  • 对于每次迭代,ul 的 'left' 属性减少 100%

这种方法在桌面浏览器和移动 safari 上效果很好,但是 android 浏览器对浮动百分比的处理很差,渲染它们不正确。我无法确定,但似乎当我将 100/6 = 16.66666667% 的宽度应用于 li 时,它被渲染为 16%,即使当我通过 javascript 查询该元素的宽度时它返回正常的截断16.6667% 宽度。结果是,随着幻灯片的每次迭代,图像变得越来越偏向左侧,因为它们没有在包装容器中占据正确的空间量。

有趣的是,当我将元素的数量减少到一个可以整除 100 的数字时,比如 100/5 = 20%,这个问题就完全消失了。

我已经查看了有关像素舍入的先前线程,但我认为这不是问题所在。据我所知,当像素的计算有余数并且浏览器必须将结果四舍五入到最近的像素时,就会发生像素舍入,这似乎是浏览器不了解小数百分比的问题。

有没有其他人遇到过这样的问题?

4

1 回答 1

0

许多浏览器不能正确处理百分比的小数:

http://www.sitepoint.com/forums/showthread.php?547308-CSS-percentage-width-roundoff

于 2012-09-14T17:11:08.050 回答