跳转 iframe 内容的 Chrome 列布局问题答案

【问题标题】：Chrome column layout issue with jumping iframe content跳转 iframe 内容的 Chrome 列布局问题
【发布时间】：2015-11-30 01:19:26
【问题描述】：

我使用“column-count 3”将视频（in）放入 3 列布局。每次当我在顶部的第二个或第三个视频上点击播放按钮时，我都会让它跳到上一列的底部。它只发生在 Chrome 中。在 Firefox 中，它正如预期的那样完美。

我尝试应用有关我在 StackOverflow 上找到的类似问题的所有提示，但是，它们都不适合我（包括将 translate 属性添加到包装容器）。你能帮我解决这个问题吗？

这是我的代码（Jade）：

            .column-list.column-list--three
            each video in content['pausecast']
                    +video-panel(video)

mixin video-panel(obj)
.video-panel
    .aspect-ratio
       iframe(scrolling="no" frameborder="0" src="//www.youtube.com/embed/"+ obj.youtubeId.replace('watch?v=',''))

.aspect-ratio
    position relative
    width 100%
    height 0
    padding-bottom 51%
    // transform translate3d(0,0,0)


.aspect-ratio iframe
    position absolute
    width 100%
    height 100%
    left 0
    top 0

.video-panel
    border-bottom grey 2px solid
    margin-bottom 40px

我绝对不能使用任何固定的高度或宽度，因为我需要它在调整大小和保持正确的纵横比时保持灵活性。因此，应尽可能减少应用的更改。提前谢谢！

【问题讨论】：

标签： css google-chrome iframe column-count

【解决方案1】：

嗯，对我有用的解决方案是摆脱列数并改用其他网格。使用 Jeet 和 col（4/12，周期：3）。就是这样。列数+绝对位置的非常奇怪的行为。

【讨论】：