溢出：隐藏;保留内容宽度，但隐藏内容：Chrome

这些t h r e e SO问题并没有完全让我满足我的需求，有趣的是虽然BFC布局的东西是。（One，Two，Three）溢出：隐藏;保留内容宽度，但隐藏内容：Chrome

This fiddle显示我有问题，只在Chrome是隐藏的内容仍然执行归类“内容”具有0像素的宽度值的div宽度尺寸。

这种布局是一个手风琴风格的菜单......这显然是不会，如果强制执行内容的尺寸是可见的工作基础：P

为什么Chrome的行为这样，也许我错过了什么的BFC的解释？解决方案将会非常棒。

2011-09-20 danjah

据我所知，Chrome正在正确地做到这一点。您正在设置内容类的宽度为0px。 overflow属性仅仅意味着你不希望文本内容在边界之外（0px宽度）可见。如果将其设置为5像素宽，则会在“内容”中看到“C”的一部分。而5px将是宽度。哪个是对的。对？ – Marshall

[for]（http://stackoverflow.com/questions/4727083/overflowhidden-not-working-as-expected-in-google-chrome）[your]（http://stackoverflow.com/questions/6425460/chrome - 和 - overflowhidden问题）[方便]（http://stackoverflow.com/questions/6128139/can-overflowhidden-affect-layout）（对不起，但试图单击1900 +分辨率的单个字母是所以很烦人） –

@Marshall其实我认为Chrome是做错了。由于“overflow：hidden”的宽度大于内容“0px”的宽度。如果是这种情况，我不会依靠这种方式。 –

真是一个讨厌的bug！

需要进一步研究，但如果您知道.content的原始宽度，那么您可以向其添加相同的负边距：http://jsfiddle.net/kizu/cpA3V/7/ - 因此它会补偿原始宽度。如果您需要为手风琴制作动画，您只需要在width旁边制作margin动画。

来源

2011-09-27 21:28:39 kizu

尝试用这种

.slide { 
    float:left; 
    width:25px; /* width added here (same width of '.handle') */ 
}

例子：JSfiddle

来源

2011-09-27 05:31:54 Sanooj

如果你给.content 1px的宽度，那么它的行为正确。我无法解释发生了什么，但是您可以使用display: none而不是宽度来解决此问题。

来源

2011-09-27 08:02:02

溢出：隐藏;保留内容宽度，但隐藏内容：Chrome

回答

相关问题