Question

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

所以我的问题是：

1.为什么offsetWith属性显示不同，是console.dir（title）;和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字体之前运行的。如果要使用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

offsetWidth在safari中无法正确显示

1 个答案: