Card-columns Embed Tweet：Chrome和其他浏览器之间的差异

时间：2017-12-17 11:07:18

标签： twitter-bootstrap google-chrome bootstrap-4

我使用Boostrap 4卡列在我的网站上分享推文。

我注意到Chrome和其他浏览器之间存在差异。事实上，Chrome在第二和第三列中丢失了一些信息。你可以在捕获中看到它。

你可以帮帮我吗？对不起我的英语，我是一个年轻的法国发展者。谢谢。

我使用此代码：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
	 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
	<div class="card-columns">
		<div class="card" style="border:none;">
			<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<div class="card" style="border:none;">
			<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<div class="card" style="border:none;">
			<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<div class="card" style="border:none;">
			<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<div class="card" style="border:none;">
			<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
		<div class="card" style="border:none;">
			<blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
			<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
		</div>
	</div>
</div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

Chrome Capture

Chrome Capture

Firefox，Safari ..捕获

Firefox, Safari .. Capture

1 个答案:

答案 0 :(得分：2)

第一件事：Twitter widget.js应该只加载一次！您也可以在页面的<head>中引用它。另外，您应该使用4.0.0-beta Bootstrap而不是4.0.0-beta.2。

关于此问题：
显然，Twitter在各种浏览器上呈现不同的小部件。在Firefox和Safari上，小部件当前以标准<iframe>呈现，而在Chrome上，Twitter决定使用名为Shadow DOM的实验性技术。事实上，根据canIUse.com，在撰写本文时，这项技术是supported only by Chrome。

虽然<iframe>完全隔离了根文档的css样式和iframe内容的css样式，但对于影子文档来说，这似乎并非完全正确。
在这种情况下，Twitter小部件的内部样式会干扰在column-count容器上使用.card-columns设置的.card css属性。很可能这是一个浏览器错误，并导致其他项目中的问题（例如spin.js和jQuery-mobile）。

当然，Twitters的目的是保护小部件的样式与页面其余部分的CSS保持一致。所以不应该修复小部件的内部样式。话虽如此，最干净的解决方案是不要像现在一样使用.card-columns。

你可以做两个想法：

  • 作为最快的解决方案，您可以使用由.row和.col-4组成的简单网格布局。如果所有的Twitter卡都具有相同的高度，这可以完美地工作，但如果卡的高度不同，则会留下一些空隙。基本上这将是：

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card" style="border:none;">
                <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
            </div>
        </div>

        <div class="col-4">
            <div class="card" style="border:none;">
                <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
            </div>
        </div>

        <div class="col-4">        
            <div class="card" style="border:none;">
                <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
            </div>
        </div>

        <div class="col-4">
            <div class="card" style="border:none;">
                <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
            </div>
        </div>

        <div class="col-4">
            <div class="card" style="border:none;">
                <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
            </div>
        </div>

        <div class="col-4">
            <div class="card" style="border:none;">
                <blockquote class="twitter-tweet" data-lang="fr"><p lang="en" dir="ltr">Recapping some of the  Tweets from the past week.</p>&mdash; Twitter (@Twitter) <a href="https://twitter.com/Twitter/status/942094257472409600?ref_src=twsrc%5Etfw">16 décembre 2017</a></blockquote>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://platform.twitter.com/widgets.js"></script>

  • 下一个选项是使用masonry.js，它可以执行与.card-columns尝试相同的操作，但它使用javascript执行此操作。

或者您可以查看下面的脚本，我不建议在生产中使用它，因为它非常hackish。看来当前窗口小部件的影子框处于open模式，因此可以访问渲染窗口小部件的内容并对其进行一些更改。所以我想出了下面的脚本来快速修复内部样式。 （不幸的是，我可以将回复和转推的图标显示出来。）这是工作Codepen sample。

// Wait for `widgets.js` to get loaded
window.addEventListener('load', function() {
    // Twitter get initialised
    twttr.ready(function(twttr) {
        // A widget item finished rendering
        twttr.events.bind('rendered', function(event) {
            // event.target is the <twitterwidget> node
            var widget = event.target,
                shadow;

            // Feature detection, if shadowRoot is in use
            if (!(shadow = widget.shadowRoot)) {
                return;
            }

            // Fixing some styles
            shadow.innerHTML += '<style>.Avatar, .Tweet-body {position: relative;}</style>';
        });
    });
});
相关问题
最新问题