Twitter中的oEmbed小部件重叠

Question

我在应用程序中使用oEmbed tweet，并对它们在Safari中的呈现方式产生了问题。在Firefox和Chrome中，tweet按预期呈现，但在Safari中，初始呈现中的tweet小部件重叠如下所示：

​

​

这是它们应该显示的方式以及它们在其他浏览器中的呈现方式：

​

​

现在，如果我在tweet呈现后调整窗口的宽度，它们就会以应有的方式弹出。我不太明白为什么会这样，因为没有错误，我有点卡住了。我正在使用这个库：https://github.com/arusahni/ngtweet，这是与我的应用程序相关的HTML

<div ng-repeat="tweet in updatedTweets | orderBy:'-'" ng-init="getTweetTotals(tweets)" class="twitter-widget">
                        <twitter-widget twitter-widget-id="tweet.id_str" twitter-widget-options="{'width': '300px', 'cards': 'hidden'}">
                        </twitter-widget> 
</div>

twitter-小部件类的css：

.twitter-widget {
  display: inline-block;
  vertical-align: top;
  padding: 2px;
  position: relative;
}

我还尝试将加载tweet数组的控制器代码包装到$timeout中，但这没有帮助。有什么想法？

Answer 1

好吧，所以我修好了。据我所知，oEmbed小部件是在ng重复为每个tweet创建元素之后呈现的。因此，元素最初具有空宽度，并且由于tweet之间的css裕度，在第一个图像中被交错。我认为(错误地)在oEmbed选项中定义宽度将涵盖这一点，但解决方案是为我为tweet创建的容器类定义css宽度。

.twitter-widget {
width: 304px; //added a few pixels for the padding in the widget
}

这解决了这个问题。