缩放更改设计布局
我正在致力于一个新的网站，这应该是“完美”-兼容ie6+，ff，铬，歌剧和狩猎。
我使它与所有这些浏览器兼容，但有一个问题我无法处理-当改变缩放，所有的布局变得混乱。
处理问题的示例：http://jsfiddle.net/pdQrQ/1/
在Chrome (14.0.835)、FF (7.0.1)和IE9中，当放大时，右上角框的大小正在改变(至少看起来是这样)，然后它就与下面的框不对齐了。
编辑：
我知道是什么原因-边境！
说明:每个浏览器上的缩放功能都会改变div的宽度/高度，而不是边框大小，因此它会导致这种故障/浮动。如果我移除边境线，一切都会正常工作。
但我想使用边框，否则我的设计将更加丑陋。
我怎么才能修好？
谢谢!
回答 2
Stack Overflow用户
发布于 2011-10-20 05:57:50
我最好的猜测，为什么这是由于舍入错误，因为它缩小。例如，如果您想象一个250 by宽的盒子，包含两个并排的盒子，每个125 by宽。很明显这些是并排的。如果你放大，使你在一半大小，那么外部框将是125 as和内部的62.5px，每一轮高达63 as，一半像素是你得到的小)。这两个现在的总宽度为126 of，因此不再并排，其中一个必须放在另一个下面。
我认为这基本上就是你在这里工作的原则。最好的解决方案，我可以看到，是使两个旁边的盒子更窄，并浮动一个向右，这样你的右边界是不被打破的。这可能意味着中间有一个稍微大一点的差距，但是当你放大的时候，这个差距有望吸收四舍五入的错误。
编辑：
正如你已经指出的，边界是造成混乱的主要原因。它们可以从外部容器中取出，并放在一个嵌套的容器上，只为添加边框而设计。
http://jsfiddle.net/chrisvenus/pdQrQ/6/
上面是一个小提琴(基于你的)，它创建包含边界的内部DIV标签，而浮动的容器根本没有边框。这一点现在似乎足够强大，可以在IE8、FF7.0.1或Chrome 14.0.835.202中工作。
改变的地方是将div添加到HTML中，并在它和它的父类之间交换一些类。有一个新的内部容器类，它将高度和宽度设置为100%，以确保它填充包含框(因此边框就是它们需要的位置。另外，我还更改了底部框的宽度，使其正确排列。
如果是这样的话请告诉我。
Stack Overflow用户
发布于 2014-08-20 13:44:46
现在最好的方法是"box-sizing:border-box"，。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }https://stackoverflow.com/questions/7835287
复制相似问题
腾讯云开发者
