修复 Chrome 调整大小行为
<div style="background-color:red;width: 300px;">
<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>
<div style="float:left;border:1px solid green;">BBB BBB BBB</div>
<div style="clear:both;"></div>
</div>
将上面的 HTML 粘贴到此处： http://htmledit.squarefree.com/
然后在 Chrome 中缩小，您将看到
在父
我想知道如何在 Chrome 中解决这个问题。
非常感谢大家。
编辑：在这里上传了屏幕截图：http://img52.imageshack.us/i/screenshot1xd。 jpg/
<div style="background-color:red;width: 300px;">
<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>
<div style="float:left;border:1px solid green;">BBB BBB BBB</div>
<div style="clear:both;"></div>
</div>
Pasting the above HTML here: http://htmledit.squarefree.com/
And then zoom out in Chrome, you will see that <div> B will eventually be forced down to the next row. If you do the same thing in Firefox and IE, both <div> A and B will stay on the same row.
Adding a height attribute on the parent <div> may help, but if the height of the content is not known beforehand, this will not be feasible.
I would like to know how this problem can be fixed in Chrome.
Many thanks to you all.
EDIT: uploaded a screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
在你的第一个 div 上，添加以下内容：
看看是否有帮助。
On your first div, add this:
See if that helps.
我也无法重现这个，但似乎你只是缩放文本，我现在在 Chrome 中找不到这个选项。
但是您应该记住，如果用户以某种方式覆盖您指定的字体站点，那么在任何浏览器中都可能发生这种情况。除了保持布局足够灵活以处理它之外，您无能为力。例如，在这种情况下，不要以像素为单位设置周围元素的宽度，而是以 em 为单位，以便它相对于字体大小。
可能还有其他解决方案，例如使用其他方法将元素彼此相邻放置，但这需要您提供一个更具体的示例来说明您想要实现的目标，特别是解释您不希望元素换行。
I can't reproduce this either, but it seems that you are only zooming the text and I can't find this as an option in Chrome right now.
However you should keep in mind, that this is something that always can happen in any browser, if the user somehow overrides the font-site you specified. There is not much you can do other than keep your layout flexible enough to handle it. For example, in this case don't set the width of the surrounding element in pixels, but in
ems so that it is relative to the font-size.There may be other solutions, such as using other methods of placing elements beside each other, but that would require that you give a more concrete example of what you are trying to achieve, especially explaining you don't want the elements to wrap.
在我的 Chrome 5 上工作得很好。
我可以建议你的是在“em”中指定父 div 的宽度。虽然你的特定版本的 chrome 似乎有一个错误，但它已经被修复了:)
另一个解决方案是设置 nowrap，如 @Kyle 所建议，而不是设置静态宽度 - 设置最小宽度。这样 div 将展开，而不是让子级换行到第二行 ^_^
Works just fine on my Chrome 5.
What I could suggest to you is to specify the width on the parent div in "em" instead.. Though it seems that your particular version of chrome had a bug, which has already been fixed :)
Another solution is to set nowrap, as proposed by @Kyle and instead of setting static width - set the min-width. This way the div will expand, instead of having the children wrap to the second line ^_^
尝试使用 max-width 属性！
try using the max-width attribute!