为啥 chrome 不为嵌入式 Twitter 时间线渲染 flexbox 定位？
Posted
技术标签:
【中文标题】为啥 chrome 不为嵌入式 Twitter 时间线渲染 flexbox 定位？【英文标题】：Why does chrome not render flexbox positioning for an embedded twitter timeline?为什么 chrome 不为嵌入式 Twitter 时间线渲染 flexbox 定位？ 【发布时间】：2020-03-13 11:03:46 【问题描述】：谁能解释为什么 Chrome（版本 78.0.3904.97）不尊重 flexbox css 在网页中将 Twitter 时间线居中？
使用 Twitter 生成的代码将 Twitter 时间线嵌入网页中，我发现尝试将时间线居中在 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- data- 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 提要的推文集合。
【问题讨论】：
您是否尝试过使用浏览器开发工具检查元素和应用的样式？ 它在 Safari 和 chrome 上运行良好。如果您仍然感到困扰，那么请用您的代码解释一下，并会检查。 【参考方案1】：我没有得到答案，但我尝试了您的代码。它对我来说很好！
尝试检查 chrome 中的元素，看看实际应用了哪些样式。
除了突出显示背景之外，我没有更改您的代码。
<!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-
data-
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>]2]2
【讨论】：
以上是关于为啥 chrome 不为嵌入式 Twitter 时间线渲染 flexbox 定位？的主要内容，如果未能解决你的问题，请参考以下文章