I have encountered a problem that really bother me , and after try all the methods, I still can´t find out a solution. The problem is offsetWidth is not show correctly in safari ,but in chrome and firefox just work well. The code is very easy, I just want to center the headline. So when window load, it´s not centered, that because title.style.left is 0. The curious thing is when I text console.dir(tile); it show offsetWidth is 662px, but console.log(title.offsetWidth); is 1170px, I don´t know why is showing different. And that causes title.style.left is 0. But the page works well in chrome and firefox.
So my question is :
1.why the offsetWith property is showing different is console.dir(title); and console.log(title.offsetWidth);
2.and how can i fix it in safari.
thanks very much in advance
(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";
}