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

发布于 2024-12-05 13:26:26 字数 898 浏览 4 评论 0 原文

这些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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

一影成城 2024-12-12 13:26:26

多么讨厌的错误啊!

需要进一步研究,但如果您知道 .content 的原始宽度,那么您可以为其添加相同的负边距:http://jsfiddle.net/kizu/cpA3V/7/ — 这样它将补偿原始宽度。如果您需要为手风琴制作动画,则只需为 marginwidth 制作动画即可。

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 the margin alongside the width.

我是男神闪亮亮 2024-12-12 13:26:26

尝试使用以下

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

示例: JSfiddle

Try with this

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

Example : JSfiddle

手心的温暖 2024-12-12 13:26:26

如果您给 .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 using display: none instead of the width.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文