浏览器缩小打破页面布局 [英] browser zoom out breaks page layout
问题描述
我在浏览器中缩小页面时遇到问题。
I am having trouble when i zoom out my page in browser.
这是一个简单的页面，主体宽度为970像素，分为2个部分，左和右。左边一个是300px，向左浮动，边距 - 右边10px，右边一个是660px，右边浮动。这是确定当我放大或缩小。
this is a simple page, body has a width of 970px, and devided into 2 parts, left and right. Left one is 300px and float to left with margin-right 10px, right one is 660px, and float right. This is ok when i zoom in or zoom out.
但是当我把左宽度改为298像素，并添加右宽度为658像素，添加1px边框两个部分，虽然它在正常大小是确定，但当我缩小（ctrl +鼠标滚轮）到90％，右部分下拉并打破布局。您可以在这里查看详细信息： jsfiddle
but when i change left width to 298px, and add right width to 658px, add 1px border to both parts, though it is ok in normal size, but when i zoom out(ctrl+ mouse wheel down) to 90%, the right part drop down and breaks the layout. You can see here for detail:jsfiddle
<body>
<style>
</style>
<div id='left'>left</div>
<div id='right'>right</div>
</body>
推荐答案
HTML不喜欢使用十进制像素数字这正是当你缩放时会发生什么 - 所有的像素大小得到内部分割或相乘（虽然乘法不是真正的问题）。
HTML doesn't like to work with decimal pixel numbers and that's exactly what happens when you zoom - all the pixel sizes get internally divided or multiplied (though multiplication isn't really a problem).
想想，它代表268.2像素？它变圆了。所以如果你有许多不可分割的元素，你必然会失去一些像素，并导致布局打破。此外，这就是为什么某些缩放百分比比其他缩放百分比更好。
Think about it, how should it represent 268.2 pixels? It gets rounded. So if you have many of those not-divisible elements, you're bound to lose some pixels and that causes the layout to break. Also, that's why some zoom percentages work better than the others.
这篇关于浏览器缩小打破页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
