Instagram嵌入图片显示（破碎和重叠）其他元素

Question

看一下屏幕截图：

这就是它应该如何出现： 如您所见，在第一个屏幕截图中，图片显示在文本上方。在第二个一切都是正确的。我正在将Instagram帖子嵌入到我的网站中，结果是有时候一切都在页面上显示正常，有时候没有（刷新页面后）。

我的代码非常简单：

<div style="width:40%; float:left"><!-- Instagram Post Embed -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/Bflevi2lUWS/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/Bflevi2lUWS/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Uma publicação compartilhada por MIAMI TIPS (@miami_tips)</a> em <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-02-24T16:10:00+00:00">24 de Fev, 2018 às 8:10 PST</time></p></div></blockquote>
    <script async defer src="//www.instagram.com/embed.js"></script>

    </div>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consequat nisl a euismod volutpat. Sed ultrices nulla vel mattis pulvinar. Nunc porttitor sem sem, faucibus molestie nibh eleifend ut. In non nunc nibh. Aenean mattis euismod diam, in faucibus quam aliquet vitae. Etiam quis urna nec enim facilisis ultricies. Phasellus blandit eleifend diam eu luctus. Nam venenatis efficitur lorem, id volutpat augue auctor vel. Integer ut lectus placerat, vulputate tellus a, tristique massa. Vestibulum scelerisque massa et gravida hendrerit. In auctor elementum tincidunt.

Maecenas ultricies arcu lacinia efficitur faucibus. Mauris vestibulum, dolor ac vulputate sodales, nisi augue aliquam nisi, in ullamcorper lectus purus vel risus. Suspendisse fermentum at mauris vitae ullamcorper. Proin condimentum vel enim ut vehicula. Etiam at diam luctus, pharetra libero sed, finibus eros. Nam mollis risus purus, rhoncus posuere risus sodales iaculis. Sed vel sem magna. Aenean pretium nunc nec diam consectetur mattis. Mauris non ultricies urna.

Quisque hendrerit lorem id sem dignissim faucibus. Sed et suscipit quam. Praesent maximus rutrum nibh cursus finibus. Vestibulum non nulla at tortor sollicitudin vulputate nec quis diam. Vivamus lobortis rutrum neque et ultricies. Donec eros ex, mollis sit amet libero vel, vehicula auctor mauris. Sed suscipit justo eu ipsum vehicula condimentum. Nam vulputate sit amet quam vel congue. Maecenas gravida libero eget est aliquet ornare. Suspendisse suscipit risus a ligula convallis, in commodo erat fringilla. Aliquam mattis mi ut sapien ullamcorper hendrerit feugiat ut neque.

</div>

我不知道发生了什么，但我相信这是因为Instagram元素在DOM之前加载。

代码就是这么简单，没有别的东西可以展示。有人知道发生了什么吗？

Answer 1

我在这里找到了答案：https://www.reddit.com/r/Wordpress/comments/7vwxdd/instagram_embed_suddenly_broken_and_overlapping/

我不确定这是否100％准确，但到目前为止还不错，还没有看到问题。

这似乎是Instagram本身的一个问题。将脚本源从https://www.instagram.com/embed.js更改为https://platform.instagram.com/en_US/embeds.js可以解决问题，但我仍在对其进行测试。