我试图找出一种方法来折叠浮动div上的边距.
将边距除以2将不起作用... div的边距需要折叠b/c每个div需要不同的边距大小(为了看起来正确并且与设计完全相同).
绝对定位不起作用...... div需要在流中,因此文本不会对div进行剪辑.
内联块可能不起作用......其中一些div需要与其父级的底部对齐,同时仍然有文本流绕它们.我无法弄清楚如何使用内联块而不是浮点数来实现这一点.
反正有没有完成花车的折叠边缘?
编辑:如果这看起来有目的 - 含糊不清,那是因为我正在努力为您节省考虑我正在尝试实施的整个设计梦魇的巨大麻烦.
编辑2:写完这篇文章之后,我才意识到如何解决我的特殊问题,而不必在浮动上折叠边距,尽管我仍然想知道它是否可能!
我正在尝试寻找解决 Mobile Safari bug\xe2\x80\xa6 的方法
\n\n如果您使用和获取一个position: fixed元素(将其称为“抽屉”)并将其扔到 Mobile Safari 中,它将在浏览器工具栏后面呈现半透明的绿色(正如您所期望的那样)。但是,只有当“抽屉”没有 text / Children 时,它才会执行此操作。height: 100vhbackground: green
将任何文本添加到“抽屉”时,Mobile Safari 不仅会停止渲染工具栏后面的半透明绿色,而且在工具栏隐藏动画完成之前不会渲染“抽屉”的底部部分。显然,这看起来像垃圾,并且是不可取的。
\n\n如何让抽屉在工具栏后面呈现,即使它有内容?
\n\nPlunker 链接说明了该问题(在 iPhone 上查看):http://plnkr.co/edit/G0mJf7H46KWhlAVJH7HN ?p=preview
\n\nHTML:
\n\n<div class="drawer left">\n Drawer with contents\n</div>\n<div class="drawer right"></div>\n<p class="lorem">Lorem ipsum\xe2\x80\xa6</p>\nRun Code Online (Sandbox Code Playgroud)\n\nCSS:
\n\n.drawer {\n background: green;\n position: fixed;\n z-index: 1;\n top: 0;\n bottom: 0;\n width: 150px;\n min-height: 100vh;\n}\n.drawer.left {\n left: 0;\n}\n.drawer.right {\n right: 0;\n}\nRun Code Online (Sandbox Code Playgroud)\n