使用 rem 字体大小时，Safari 在 details 元素后呈现错误

Question

当字体大小设置为 rem 时，Safari 10.0.1 呈现细节元素后面的元素错误。以font-size 1px渲染的细节之后的元素。

HTML

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>
<ul>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
  <li>Lorem Ipsum</li>
</ul>

CSS

html{
  font-size: 1em;
}

ul {
  font-size: 1rem;
}

如果元素重新渲染（例如悬停），则元素重新绘制正确。

有什么解决方法吗？

Answer 1

解决方法是将细节元素设置为默认显示 none 并通过 JavaScript 显示。不干净但有效。

Answer 2

更好的解决方法是完全不使用标签，而是使用标准。这个错误让我疯狂了几个星期，直到我发现如何轻松修复它。

似乎是 Safari 中的一个大缺陷，其他浏览器可以正常呈现。

Answer 3

你试过用ems代替rems吗？

使用 rem 字体大小时，Safari 在 details 元素后呈现错误

Safari renders wrong after details element when use rem font size

html

css

safari

rendering