display:flow-root 在 Safari 中的行为不同答案

【问题标题】：display:flow-root behaves differently in Safaridisplay:flow-root 在 Safari 中的行为不同
【发布时间】：2022-01-12 17:16:49
【问题描述】：

所以，我有以下代码：

<p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas repellendus quos maxime, aliquid, ab eum consequatur minima facilis ipsa magnam distinctio nihil vel, excepturi placeat? Voluptate neque natus quibusdam asperiores?</p>

@import url('https://fonts.googleapis.com/css2?family=DM+Sans&display=swap');

.paragraph {
  margin: 0;
  background: salmon;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: -0.5px;
}

.paragraph::before {
  content: "";
  margin-bottom: -0.405em;
  display: flow-root;
}

.paragraph::after {
  content: "";
  margin-top: -0.409em;
  display: flow-root;
}

https://codepen.io/pollx/details/jOGqByv

这是不同浏览器的结果：铬 v96.0.4664.55

火狐v94.0.2

Safari v15.1 (17612.2.9.1.20)

Chrome 和 Firefox 具有相同的结果（文本容器在顶部和底部被裁剪）。另一方面，Safari 看起来有点不同。 MDN 说 Safari > v12.5 应该支持display:root-flow

不太清楚Safari图像的差异来自哪里

编辑

Safari 版本 15.1 (17612.2.9.1.20) 与 Safari 技术预览版 136（Safari 15.4，WebKit 17613.1.9.2）+ CSS.normalize

【问题讨论】：

标签： html css safari cross-browser webkit

【解决方案1】：

这可能是由于浏览器的默认设置。例如 Chrome 和 Safari 有不同的默认设置，这意味着字体和其他一切都不同。

此时您需要规范化这些设置。

Remove browser default styling <!DOCTYPE>

编辑：在每个浏览器中使用它只是为了确保一切看起来都一样： https://necolas.github.io/normalize.css/

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Example</title>
<!-- you can even link more css -->
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="yourstyle.css" />
</head>
<body>

</body>
</html>

【讨论】：

如果有帮助请告诉我
嘿！感谢您的回答。不幸的是，CSS 规范化并不能解决问题。查看编辑