这些ree 所以问题并没有完全满足我的需要,尽管 BFC 布局的东西很有趣。 (一个,两个,三)
这个小提琴显示了我遇到的问题,只有在 Chrome 中,隐藏内容仍然强制执行宽度值为 0px 的“内容”类别的 div 的宽度尺寸。
此布局是手风琴样式菜单的基础...如果强制内容尺寸可见,则显然不会起作用:P
为什么 Chrome 会这样,也许我错过了 BFC 解释中的某些内容?一个解决方案会很棒。
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
发布评论
评论(3)
多么讨厌的错误啊!
需要进一步研究,但如果您知道
.content
的原始宽度,那么您可以为其添加相同的负边距:http://jsfiddle.net/kizu/cpA3V/7/ — 这样它将补偿原始宽度。如果您需要为手风琴制作动画,则只需为margin
和width
制作动画即可。What a nasty bug!
Need to research if further, but if you know the original width of
.content
, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate themargin
alongside thewidth
.尝试使用以下
示例: JSfiddle
Try with this
Example : JSfiddle
如果您给
.content
的宽度为 1px,那么它的行为是正确的。我无法解释发生了什么,但您可以通过使用display: none
而不是宽度来解决此问题。If you give the
.content
a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by usingdisplay: none
instead of the width.