css - Chrome上iframe显示异常(Firefox正常)

Question

关于 my page ，顶部居中的嵌入式 YouTube 视频 (iframe) 填满了 Firefox 上的整个响应容器，但由于某种原因，它显示得小得多，并且仅在 Chrome 上的容器的上半部分显示:

HTML:

<div class='product_frame_wrap'>
    <div class='product_frame'>
        <div class='product_frame_image_vid'>
            <iframe>...</iframe>
        </div>
    </div>
</div>

CSS:

.product_frame_wrap {
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    width: 100%;
}
.product_frame {
    background: rgba(0, 0, 0, 0) url("images/frame.png") no-repeat scroll 50% 50% / contain ;
    padding-bottom: 75%;
    position: relative;
}
.product_frame_image_vid {
    bottom: 0;
    left: 0;
    padding-top: 5%;
    position: absolute;
    right: 0;
    top: 0;
}
.product_frame_image_vid iframe {
    height: 100% !important;
    width: 100% !important;
}

Answer 1

如果您查找特定于浏览器的 css，您会发现 hacks。下面的代码只会影响 chrome 浏览器。当您将 iframe 的高度设置为 200% 时，它似乎在 chrome 中正确填充。

将以下代码片段添加到您的 css 应该可以解决问题:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .product_frame_image_vid iframe { height:200%; } 
}