Question

当字体大小设置为rem时，Safari 10.0.1会在detail元素后面呈现元素错误。使用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

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

Answer 2

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

似乎是Safari的一大缺陷，其他浏览器也能正常呈现。

Answer 3

您是否尝试过使用ems而不是rems？

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

3 个答案: