我正在编写一个脚本来获取导航栏中的项目,并将除最后一行之外的每一行拉伸到菜单容器的宽度。这个过程基本上是:
- 找到菜单容器宽度
- 遍历每个项目,将.outerWidth(true)
添加到包含当前行宽的变量
- 当前行宽度大于或等于容器宽度时,运行一些测试
- 从当前行宽中提取.outerWidth(true)
并添加.innerWidth().
- 如果行宽仍然大于容器宽度,则移动到下一行数组,并将当前项添加为行中的第一项,
- 如果行宽等于或小于容器宽度,请将该项添加为当前行的最后一项,然后移至下一行数组。
创建行后,通过查找容器宽度和行宽之间的差异并按照以下公式计算要添加到每个元素的必要填充:
this.addedPadding = Math.floor( this.difference / ( this.items.length * 2) );
然后通过以下方式计算剩余空间:
this.leftovers = this.difference - (this.addedPadding * 2 * this.items.length);
然后继续遍历所有项目,添加添加的填充。然后取leftovers
,向下迭代2,向第一个元素的每一边添加1px的填充,然后在第二个,第三个元素中添加第二个,依此类推,直到leftovers
等于1或0.如果等于一,在行的最后一项的padding-right
中添加一个px填充。
遍历每一行,然后重复此过程。
现在,问题是,不同的浏览器呈现的字体略有不同,因此数字并不总是完美相加。我目前的解决方案是通过浏览器的必要调整来更改容器宽度,以便正确地呈现行。这甚至没有一致的结果。例如,在我正在使用的网站上,在Chrome中,主页首先呈现错误,但是(至少在我的计算机上)如果刷新,它会正确呈现。
在不必根据浏览器和内容更改containerWidth的情况下,解决此问题的正确方法是什么?有办法吗?
有关此问题的示例,请访问http://development.rjhallsted.com/login_system/browsing/projects/insidemt/