1

如果我设置了一个使用 CSS3 列的布局，并尝试在该布局中嵌入一个 Vimeo iframe，它会显示为一个黑框。

这是一个小提琴来说明我的意思：http: //jsfiddle.net/tMyfa/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">  
<style type='text/css'>
body {
-webkit-column-count: 3;
-webkit-column-gap: 2em;
}
</style>
</head>
<body>
<body>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>
<p><iframe src="http://player.vimeo.com/video/4716148" width="300" height="169" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam.<p>  
</body>
</html>

如果将列数设置为 1，问题就会消失。

有人对这个问题有任何见解吗？

这是一个更新的小提琴以更好地显示问题：http: //jsfiddle.net/t7AP7/

4

1 回答 1

0

消除

.post_content iframe {
   width: 100% !important;
   height: 200px !important;
}

并尝试像这样设置 iframe 的宽度：

    <iframe src="http://player.vimeo.com/video/62257681" 
    width="250" height="150" frameborder="0" 
    webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
于 2013-04-02T20:09:05.313 回答