Question

我在Safari 11中遇到以下问题.Safari浏览器没有＆＃34;重绘＆＃34;或＆＃34;重新计算＆＃34;在关闭body标记之前放置样式时正确放置文本的位置。导致问题的这些样式：

h1 {
  letter-spacing: .2em;
  text-align: center;
}

你可以在这里看到这个例子。当您在Safari中单击它时，将重新存储该文本。是否有正确定位文本的解决方法？

http://jsfiddle.net/rauot9tq/3/ 要么： http://jsfiddle.net/rauot9tq/4/

在下图中，第一行中的文本放错位置，第二行点击时加倍：

Answer 1

此问题的答案是强制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/

Answer 2

我刚刚遇到了相同的问题，看来您的是唯一可以简单，正确地进行复制的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/。

Safari 11文本中心＆amp;字母间距问题

2 个答案: