Ric*_*aly 5 firefox layout google-chrome css3
我们正在尝试创建菜单样式布局.我正在使用css-columns属性来实现列的效果.内容是可变的,因此我们希望坚持使用此解决方案,因为我们希望浏览器组织内容以获得最佳匹配.
在下面的示例中,我们看到Chrome中的一些奇怪行为(版本32.0.1700.77)以及Firefox(版本24.0)中的一些不同(但同样奇怪)的问题,所以我假设它是我们的实现.
在Chrome中,我们看到第一列下面有一个很大的间隙,好像它将第三个LI放在那里开始,然后在渲染过程中的某个点将它移动到第二列的顶部.
在Firefox中,我们看到H3"炒蛋"留在第一列的底部,当第三列的其余内容移到第二列的顶部时.
实例:http://codepen.io/daviddarnes/pen/BeEIp
猜测: - 我们正在使用"break-inside:avoid;" 在OL内的每个元素上.这可能导致问题,但我们似乎无法纠正它. - 基于H3问题......可能与此有关吗？或者这个H3标签附近的元素.
分页符属性的目的不是缩小内容以适合页面，而是帮助确定发生分页符的最佳位置。
因此，如果您在元素上使用 'page-break-inside:avoid'，并且当前页面上没有足够的空间来容纳整个元素，则浏览器将考虑插入一个分隔符，以强制该元素到新页面上，理论上给它更多的空间。
但是，如果该元素太大以至于将其移动到新页面上没有帮助，那么就没有什么可做的（至少在分页符方面）。
如果您事先知道打印时需要缩小内容，则可以尝试在问题元素上添加缩放变换（仅限于打印介质类型），以便它们的尺寸更易于管理。
这对你有帮助吗？
| 归档时间： |
|
| 查看次数： |
732 次 |
| 最近记录： |