iframe在Chrome中转义css列 [英] iframes escaping css columns in Chrome

问题描述

我想在一个有3列的网格中设置iframes。

I am trying to set up Iframes inside a grid with 3 columns.

<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

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%;
}

---

>

---

What it is like:

但问题是，iframe跳出了网格。这里是我的JsFiddle 来告诉你它发生了。正如你可以看到第一个盒子工作正常（如预期），但右边的两个框，iframe逃脱？

But the problem is, is that the iframe jumps out of the grid. Here is my JsFiddle to show you it happening. As you can see the first 'box' works fine (as expected) but the next two boxes to the right, the iframe escapes?

推荐答案

添加：

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

通过这个！

这篇关于iframe在Chrome中转义css列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！