logo标签列表

Safari 11 文本居中和字母间距问题

csssafari
3
我遇到了以下问题，这个问题出现在Safari 11浏览器中。当样式放置在关闭的body标签之前时，Safari浏览器无法正确地“重绘”或“重新计算”文本的位置。这些样式导致了这个问题：
h1 {
  letter-spacing: .2em;
  text-align: center;
}

您可以在此处查看示例。在Safari中单击文本时，文本将重新定位。有没有解决方法来正确定位文本？ http://jsfiddle.net/rauot9tq/3/ 或者： http://jsfiddle.net/rauot9tq/4/ 在下面的图片中，第一行中的文本错位了，并且在单击它时在第二行中重复出现： enter image description here
2个回答
2
这个问题的解决方法是强制 Safari 重新渲染内容。 纯 CSS 的解决方案是在 <head> 元素中设置样式，例如：
body {
    display: none;
}

在页脚中：
body {
    display: block;
}

这里是更新后的可用示例：http://jsfiddle.net/rauot9tq/10/

另一个解决方案可能是使用JS强制Safari重新绘制：

document.querySelector('body').style.display = 'none';
document.querySelector('body').offsetWidth;
document.querySelector('body').style.display = 'block';

使用JS解决方案：http://jsfiddle.net/rauot9tq/11/

0

我刚刚遇到了同样的问题，看起来你的jsfiddle是唯一一个能够简单而正确地重现该问题的，谢谢。虽然我认为问题的原因不是在<style>之前的</body>，否则在这两者之间插入一个简单的<span>就可以解决问题。我通过将文本容器的display属性更改为inline-block并添加width来解决了这个问题，这样我的文本仍然可以居中显示。

h1 {
  letter-spacing: .2em;
  text-align: center;
  display: inline-block;
  width: 100%;
}

这里是代码片段：http://jsfiddle.net/rauot9tq/28/。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接