html - Iframe 未在水平滚动 Div 中完全加载

Question

我正在尝试将 iframe 放在水平滚动的 div 中，以便用户可以滚动查看 Instagram 帖子。我遇到的问题是，当页面加载时，它会切断比 div 更大的内容。如何在不剪切任何 iframe 内容的情况下将整个 iframe 加载到 div 中，以便用户可以滚动？

#scroll {
  width:100%;
  height:700px;
  margin:0px auto;
  background:#A3CBE0;
  overflow:auto;
  white-space:nowrap;
  box-shadow:0 0 10px #000;
}

<div id="scroll">
  <iframe src="http://snapwidget.com/bd/?h=anVpY2V8aW58MjAwfDEyfDJ8fHllc3w4fG5vbmV8b25TdGFydHxub3xubw==&ve=170515" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="yes" style="border:none; overflow:hidden; width:2520px; height:670px"></iframe>
  <div style="height:1px;width:2520px; background-color:#A3CBE0;">
  </div>
</div>

这是问题的样子 http://i.imgur.com/ynjzuXB.jpg

Answer 1

你在那个 iframe 的某处有一个 max-width: 100%，这会把你的事情搞砸。

尝试删除它，或者通过将其设置为默认值来覆盖它，即 max-width: 0