Chrome3和CSS3列的Chrome和Soundcloud嵌入问题 [英] Chrome and Soundcloud embed issue with CSS3 columns
本文介绍了Chrome3和CSS3列的Chrome和Soundcloud嵌入问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在Chrome中，如果将soundcloud嵌入到css3列中，它总是跳出容器？
In Chrome when I place a soundcloud embed into a css3 column it always jumps out of the container?!
注意：
- 我注意到，如果它在第一列嵌入不再试图跳跃。
- 这只发生在Chrome，safari未受影响。
DEMO（在Chrome 38中查看）：
http://jsfiddle.net/52u9qe8r/2/
DEMO (viewed in Chrome 38): http://jsfiddle.net/52u9qe8r/2/
。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.columns{
-webkit-columns: 100px 2;
columns: 100px 2;
background:red;
text-align:left;
}
body{
background:yellow;
}
.soundcloud{
background:lime;
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
}
</style>
</head>
<body>
<div class="columns">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels. The dimensions of the grid in each configuration are noted down within CSS comments, accompanied by suitable media queries, like thus:</p>
<div class="soundcloud"><iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/21736213&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe></div>
<p>I'm some more text text</p>
</div>
</body>
</html>
推荐答案
class
.soundcloud
transform: translate3d(0,0,0);
这篇关于Chrome3和CSS3列的Chrome和Soundcloud嵌入问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
