为什么 chrome 不渲染嵌入式 twitter 时间线的 flexbox 定位？
[英]Why does chrome not render flexbox positioning for an embedded twitter timeline?
问题描述
Can anyone shed light on why Chrome (Version 78.0.3904.97) does not respect flexbox css for centering a Twitter timeline in a web page?
使用 Twitter 生成的代码将 Twitter 时间线嵌入到 web 页面中，我发现在 Chrome 中尝试将时间线居中是不可能的。 它在 Safari 中运行良好。
Safari screenshot showing the Twitter timeline centered in the twt class div Chrome screenshot showing the Twitter timeline left-aligned in the twt class div
/* html snippet */
<div class="twt">
<a class="twitter-timeline" data-width="640" data-height="860" href="https://twitter.com/PremierLake?ref_src=twsrc%5Etfw">Tweets by PremierLake</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
/* flexbox css */
.twt {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-content: stretch;
width: 100%;
height: 860px;
}
注：我尝试过非flexbox传统定位。 我不想使用绝对定位，因为 div 结构需要与页面上的周围元素一起流动。 我已经搜索了 Twitter 开发说明，但它们无法将时间线居中。 这与可以居中的封装单个推文不同。 Twitter 时间线是来自单个 Twitter 提要的推文集合。
1 个解决方案
解决方案1
0 2019-11-18 06:50:32
我没有得到答案，但我尝试了你的代码。 它对我来说很好！
尝试检查 chrome 中的元素，看看 styles 实际应用于它。
除了突出显示背景外，我没有更改您的代码。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> /* flexbox css */:twt { display; flex: flex-direction; column: align-items; center: justify-content; center: align-content; stretch: width; 100%: height; 860px: background; yellow: } </style> </head> <body> <h1>blalbalbalb</h1> <div class="twt"> <a class="twitter-timeline" data-width="640" data-height="860" href="https.//twitter?com/PremierLake:ref_src=twsrc%5Etfw" >Tweets by PremierLake</a > <script async src="https.//platform.twitter.com/widgets.js" charset="utf-8" ></script> </div> </body> </html>
Twitter用户名嵌入的时间表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.