我正在一个新网站上工作,这个网站应该是“完美的” – 与ie6,ff,chrome,opera&苹果浏览器.
我使它与所有这些浏览器兼容,但有一个问题我无法处理 – 当更改缩放,所有的布局变得无序.
问题示例：
http://jsfiddle.net/pdQrQ/1/
在Chrome(14.0.835)中,FF(7.0.1)& IE9,当缩小时 – 右上角的大小正在改变(至少它看起来像),然后它不正确对齐在下面的框.
编辑：
我知道是什么原因 – 边界！
说明：每个浏览器上的缩放功能都会改变div的宽度/高度,但不会改变边框大小,因此会导致此毛刺/浮动.如果我删除边框,一切都可以工作.
但是我想使用边框,否则我的设计将会变得更加糟糕.
如何解决？
谢谢！
解决方法
我最好的猜测为什么这是因为缩小的四舍五入的错误.例如,如果你想象一个宽250像素的框,并且包含两个框,每个框宽125像素宽.显然,这些并列并列.如果你缩小到一半,那么外框是125像素,内部的62.5像素,每个像素的像素半径为63像素的像素一样小).这两个现在总共达到126像素宽度,所以不再并列,一个人必须走在另一边.
这基本上是你在这里工作的原则.我可以看到的最好的解决方案是使两个并排的盒子更窄,并且向右漂浮,使得你的右边界是不间断的.这可能意味着中间稍微更大的差距,但是当您缩小时,该差距可以希望能够吸收舍入误差
编辑：
正如您所注意到的,边界是造成混乱的主要原因.它们可以从外部容器中取出并放置在仅仅添加边界的嵌套容器中.
http://jsfiddle.net/chrisvenus/pdQrQ/6/
以上是一个小提琴(基于你的),它创建了包含边框的内部DIV标签,而浮动的容器根本没有边框.现在,这似乎足以在IE8,FF7.0.1或Chrome 14.0.835.202中使用.
改变的东西是将div添加到HTML,并在它和它的父代之间交换一些类.有一个新的innercontainer类,它将高度和宽度设置为100％,以确保它填充包含框(并且因此边框是他们想要的位置.此外,我更改了底部框的宽度,使其正确排列.
让我知道,如果这是你.
