offsetWidth在safari中不能正确显示

Question

我遇到了一个真正困扰我的问题，在尝试了所有的方法之后，我仍然找不到解决方案。问题是offsetWidth在safari中不能正确显示，但在chrome和火狐中却工作得很好。代码很简单，我只想把标题居中。所以当窗口加载时，它没有居中，因为title.style.left是0。奇怪的是，当我发送console.dir(磁贴)时，它显示offsetWidth是662px，而console.log(title.offsetWidth)；是1170px，我不知道为什么会显示不同。这会导致title.style.left为0。但是这个页面在chrome和firefox中运行得很好。

所以我的问题是：

1.Title属性显示不同的原因是console.dir(标题)和console.log(title.offsetWidth)；

2.如何在safari中修复它？

提前感谢！

(function(){



var  title = document.querySelector("header  h1");
   var header = document.querySelector("header");
    console.dir(title);
    console.log(title.offsetWidth);
    title.style.top=(header.offsetHeight-title.offsetHeight)/2  + "px";
    title.style.left=(header.offsetWidth-title.offsetWidth)/2 + "px";



function rePosition(){
title.style.top=(header.offsetHeight-title.offsetHeight)/2 + "px";
title.style.left=(header.offsetWidth-title.offsetWidth)/2 + "px";

}

Answer 1

这是由于在加载Google字体之前运行的脚本。如果你想使用谷歌字体，你需要等待document.fonts.ready。

document.fonts.ready.then(function () {
  alert('All fonts in use by visible text have loaded.');
  alert('Roboto loaded? ' + document.fonts.check('1em Roboto'));  // true
});

致词：https://stackoverflow.com/a/32292880/1498118