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 に答える