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

Question

这些t h r e e SO问题并没有让我得到我需要的东西，虽然有趣的是BFC布局。 （One，Two，Three）

This fiddle显示我遇到的问题，仅在Chrome中隐藏的内容仍然强制div的“内容”的宽度尺寸，宽度值为0px。

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

为什么Chrome会以这种方式表现，也许我错过了BFC解释中的一些内容？解决方案很棒。

Answer 1

试试这个

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

示例：JSfiddle

Answer 2

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

Answer 3

多么讨厌的虫子！

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