Javascript offsetWidth在safari中未正确显示

我遇到了一个困扰我的问题，在尝试了所有的方法之后，我仍然找不到解决办法。问题是offsetWidth在safari中没有正确显示，但在chrome和firefox中效果很好。 代码很简单，我只想把标题放在中间。所以当窗口加载时，它不会居中，因为title.style.left是0。奇怪的是当我输入文本console.dir（tile）；它显示offsetWidth是662px，但console.log（title.offsetWidth）；是1170px，我不知道为什么显示不同。这导致title.style.left为0。但该页面在chrome和firefox中运行良好

所以我的问题是：

1.offsetWith属性显示不同is 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";

}

---

这是由于在加载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
});

---

信用证：

这是由于在加载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
});

---

信用证：

可能您启动该功能太早了。尝试将其包装到

$（文档）.ready（函数（此处的代码））

。我建议您使用jquery，因为它非常大。是的，我也尝试过，它在safari中仍然不能正常工作。但谢谢你的建议：）也许是一个交叉问题。尝试使用jQuery

outerHeight

。请看更多详细信息嗨，伙计们，我已经解决了这个问题，问题是字体，我不知道为什么，我使用谷歌字体作为标题，但当我将字体更改为浏览器的默认字体时，突然之间，safari中的所有字体都能正常工作。我明白了。这是由于在加载Google字体之前运行的脚本造成的。如果你想使用谷歌字体，你需要等待

document.fonts.ready

。看，也许你启动函数太早了。尝试将其包装到

$（文档）.ready（函数（此处的代码））

。我建议您使用jquery，因为它非常大。是的，我也尝试过，它在safari中仍然不能正常工作。但谢谢你的建议：）也许是一个交叉问题。尝试使用jQuery

outerHeight

。请看更多详细信息嗨，伙计们，我已经解决了这个问题，问题是字体，我不知道为什么，我使用谷歌字体作为标题，但当我将字体更改为浏览器的默认字体时，突然之间，safari中的所有字体都能正常工作。我明白了。这是由于在加载Google字体之前运行的脚本造成的。如果你想使用谷歌字体，你需要等待

document.fonts.ready

。看见