【问题标题】：iframes escaping css columns in Chromeiframe 在 Chrome 中转义 css 列
【发布时间】：2015-07-21 21:11:59
【问题描述】：

我正在尝试在具有 3 列的网格内设置 iframe。

HTML

<div id="blogPosts">

    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>

    ...
</div>

CSS

#blogPosts {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%;
}
.blogPost {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

是什么样的：

我想要的样子：

但问题是，iframe 跳出了网格。这是my JsFiddle 向您展示它的发生。如您所见，第一个“盒子”工作正常（如预期的那样），但右边接下来的两个盒子，iframe 逃脱了吗？

【问题讨论】：

您需要使用列属性还是可以使用其他解决方案？
我想我需要 column 属性，它是如此接近我真正想要的，它只是 iframe 逃跑了......太奇怪了！
我真的看不出任何视频有什么问题，使用 Firefox 37。“iframe 转义”是什么意思？究竟会发生什么，您期望会发生什么？你用的是什么浏览器？
@Xufox 请看上面添加的图片
铬！！这很奇怪，因为我稍微调整了 jsfiddle 上的宽度，这就是我得到 “我想要它是什么样的” 的方式（也就是它的工作原理）但我已经更改了 chrome 浏览器上的宽度和它不会改变！

标签： html css google-chrome iframe

【解决方案1】：

添加：

iframe{
    transform: translate3d(0,0,0);
}

在this 的帮助下解决了我的问题！

【讨论】：

如果 iframe 已经进行了转换并且这种情况仍在发生，在父级上使用它可以解决我的问题。谢谢！

【解决方案2】：

通过将位置添加到博文类来修改您的代码。

#blogPosts {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;

}
.blogPost {
      display: inline-block;
  margin-bottom: 20px;
  width: 32.1%;
  position: absolute;
}

.blogPost:nth-child(1){
left: 34.2%;
}
.blogPost:nth-child(2){
left: 67.1%;
}

<div id="blogPosts">
    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>
    
    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>
    
    <div class="blogPost">
        <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscreen=""></iframe>
        <div class="title">Youtube Video</div>
        <div class="time">11th May, 2015</div>
        <div class="info">this is the best youtube video ever!</div>
    </div>
</div>

这会解决您的问题吗？

【讨论】：

为什么宽度是相当随机的百分比？你是怎么想到它们的？
我在 [jsfiddle.net/4ejrd6g2/] 它的工作原理中添加了相同的代码。实际上你可以均衡和添加宽度和左值。
我又加了几个帖子，看看happens
参考这篇文章(stackoverflow.com/questions/15808185/…)。我的建议是……它是 Youtube 和 chrome 的一个已知问题。你必须采用其他方法。通过宽度而不是 CSS 中的列数控制