Chrome和Soundcloud嵌入CSS3列的问题
在Chrome中，当我将soundcloud嵌入css3列时，它总是跳出容器 注:Chrome和Soundcloud嵌入CSS3列的问题,css,google-chrome,iframe,soundcloud,multiple-columns,Css,Google Chrome,Iframe,Soundcloud,Multiple Columns,在Chrome中，当我将soundcloud嵌入css3列时，它总是跳出容器 注: 我注意到如果它在第一列中，嵌入不再尝试跳转 这只发生在Chrome中，safari不受影响 演示（在Chrome38中查看）： .栏目{ -webkit列：100px2； 色谱柱：100px2； 背景：红色； 文本对齐：左对齐； } 身体{ 背景：黄色； } .声云{ 背景：石灰； -webkit列内部中断：避免； -莫兹柱内折：避免； -o-柱-内部破裂：避免； -ms柱内折：避免； 内柱断裂：避免；
- 我注意到如果它在第一列中，嵌入不再尝试跳转
- 这只发生在Chrome中，safari不受影响
.栏目{
-webkit列：100px2；
色谱柱：100px2；
背景：红色；
文本对齐：左对齐；
}
身体{
背景：黄色；
}
.声云{
背景：石灰；
-webkit列内部中断：避免；
-莫兹柱内折：避免；
-o-柱-内部破裂：避免；
-ms柱内折：避免；
内柱断裂：避免；
}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本
黄金网格系统（GGS）将屏幕分割为18个偶数列。最左边和最右边的列用作网格的外缘，其中留下16列供设计使用。现在，16列对任何东西来说都有点过分，除了巨大的宽屏显示器。这就是受到DIN纸张系统和Unigrid启发的折叠式设计的用武之地。对于平板电脑大小的屏幕，这16列可以组合或折叠成8列，对于手机大小的屏幕，这16列可以折叠成4列。通过这种方式，GGS可以轻松覆盖240到2560像素的任何屏幕大小。每个配置中的网格尺寸都记录在CSS注释中，并伴有适当的媒体查询，如下所示：
我要再发一些短信
没有人有任何想法？这对我提出问题很有帮助
<!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>
transform: translate3d(0,0,0);