修复 Chrome 调整大小行为答案

【问题标题】：Fixing Chrome resizing behaviour修复 Chrome 调整大小行为
【发布时间】：2011-02-18 11:43:14
【问题描述】：

<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中缩小，你会看到<div>B最终会被强制缩小到下一行。如果你在 Firefox 和 IE 中做同样的事情，<div> A 和 B 将保持在同一行。

在父 <div> 上添加一个高度属性可能会有所帮助，但如果事先不知道内容的高度，这将是不可行的。

我想知道如何在 Chrome 中解决这个问题。

非常感谢大家。

编辑：在此处上传截图：http://img52.imageshack.us/i/screenshot1xd.jpg/

【问题讨论】：

对我来说看起来不错，Win Vista 上的 Chrome。
是的，工作正常。 Chrome 4.1.249.1064 Win XP 1280x1024
您能否在某处发布您所描述内容的屏幕截图。我无法重现它。

标签： css cross-browser google-chrome resize browser

【解决方案1】：

尝试使用 max-width 属性！

【讨论】：

请添加更多详细信息。

【解决方案2】：

在我的 Chrome 5 上运行良好。

我可以向您建议的是在“em”中指定父 div 的宽度。尽管您的特定版本的 chrome 似乎有一个错误，该错误已被修复:)

另一个解决方案是设置 nowrap，正如@Kyle 所建议的那样，而不是设置静态宽度 - 设置最小宽度。这样 div 会展开，而不是让子代换行到第二行 ^_^

【讨论】：

【解决方案3】：

我也无法重现此内容，但您似乎只是在缩放文本，而我现在在 Chrome 中找不到此选项。

但是您应该记住，如果用户以某种方式覆盖了您指定的字体站点，这在任何浏览器中都可能发生。除了保持布局足够灵活以处理它之外，您无能为力。例如，在这种情况下，不要以像素为单位设置周围元素的宽度，而是以ems 为单位，以便它与字体大小相关。

可能还有其他解决方案，例如使用其他将元素并排放置的方法，但这需要您提供一个更具体的示例来说明您想要实现的目标，特别是说明您不希望元素换行。

【讨论】：

【解决方案4】：

在你的第一个 div 上，添加：

<div style="background-color:red;width: 300px; white-space:nowrap;">

看看有没有帮助。

【讨论】：