嵌入式推文有时会在不同的浏览器上丢失边框

Question

我试图以2行显示一组响应式嵌入式推文。

以下是允许我使用它的相关代码段。

HTML

<div id="tweets"></div>
<script src="https://platform.twitter.com/widgets.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

CSS

#tweets {
  margin: 10px auto 0;
  max-width: 820px;
  width: 95%;
}
#tweets .row {
  overflow: hidden;
}
#tweets .row > .tweet {
  max-width: 520px;
  width: 49%;
}
#tweets .row > .tweet:nth-child(1) {
  float: left;
}
#tweets .row > .tweet:nth-child(2) {
  float: right;
}
#tweets .row > .tweet .twitter-tweet-rendered {
  max-width: 100% !important;
  width: 100% !important;
}

的JavaScript

window.onload = (function() {
  // sample data
  var tweets = [
    '629488522752212992', '629487749200936961', '629488522752212992',
    '629487749200936961', '629488522752212992', '629487749200936961'
  ];

  var container = $('#tweets');
  var list = '';
  // build the necessary markup before rendering tweets
  for (var i = 0, even = true; i < tweets.length; i++, even = i % 2 === 0) {
    if (even) {
      list += '<div class="row">';
    }
    list += '<div class="tweet"></div>';
    if (!even) {
      list += '</div>';
    }
  }
  container.html(list);
  // render tweets 
  $.each(tweets, function(i) {
    var tweet = container.find('.tweet:eq(' + i + ')');
    twttr.widgets.createTweet(this, tweet[0], {
      'cards': 'none'
    });
  });
});

演示：https://jsbin.com/yigucejice/edit?output

现在问题在于：推文＆＃39;边框不一致地显示在不同的浏览器上。例如，有时某些推文上的右边框隐藏在我的IE 11中（如下图所示）;或者有时一些推文的底部边框隐藏在我的Firefox 39.0中。

我希望边框始终显示在每个浏览器上。

在推文中，我尝试调整iframe（.twitter-tweet-rendered）的样式，例如边距和高度，但是没有运气解决问题。

我该如何解决这个问题？如果没有，有没有办法关闭边界？

解决方案

感谢下面的answer，我最终修改了我的JavaScript代码：

twttr.widgets.createTweet(this, tweet, { 'cards': 'none' }).then(function(frame) {
    // remove EmbeddedTweet's border
    $(frame).contents().find('.EmbeddedTweet').css({ 'border': 'none' });
    // add border on the placeholder that holds the iframe
    tweet.addClass('border'); 
});

Answer 1

有两种方法可以解决问题，边框不会消失，

边框消失的原因是媒体屏幕大小查询并且在Chrome边框中正确呈现并显示但在Firefox中它会消失，但在Firefox中如果您将页面大小从100%缩小到90%边框出现并正确显示。

有两种解决方案

使用纯CSS

将宽度width: 49%;缩小为width: 47%;

#tweets .row > .tweet {
    max-width: 520px;
    width: 47%;
}

或者使用jQuery，

添加以下代码并将margin: 1px设置为EmbeddedTweet，以便边框有空格显示/显示。

<script>
window.setTimeout(function(){
    $(".twitter-tweet-rendered").contents().find(".EmbeddedTweet").css("margin","1px");
  }, 3000); 
</script>

我将时间设置为3000，因此首先加载iframe并设置保证金，因为twitter iframe是跨域的。

注意：无法将iframe直接应用于iframe作为其跨域，因此jQuery或JavaScript是唯一的选择。

我重现了错误Here并应用了jQuery解决方案