getComputedStyle width问题（span元素为子元素）

Question

我使用的是electron.js + bootstap，我有一个按钮，正在尝试实现它。

<button id="button" class="btn btn-danger" style="width: 100%; height: 100%; resize: none;">
BUTTON1
<span class="glyphicon glyphicon-music"></span>
</button>

如您所见，chrome调试器中显示的按钮元素的宽度为“104.312px”。

但我得到的价值是：

var buttonStyle = window.getComputedStyle(my_button_element, null);
alert(buttonStyle.width);

是“100.438px”。

如果我删除了只留下按钮元素的span图标，则chrome调试器和我的代码中的值是相同的。

感谢任何建议，谢谢：）

更新

这是jsfiddle example

var div = document.getElementById("div");

// add a button
var button = document.createElement("button");
button.innerHTML = "BUTTON";
div.appendChild(button);
console.log("width 1: " + getComputedStyle(button).width);

button.onclick = function() {
    console.log("width onclick: " + getComputedStyle(button).width);
};

// add a span : bootstrap icon
var span = document.createElement("span");
span.className = "glyphicon glyphicon-music";
button.appendChild(span);

console.log("width 2: " + getComputedStyle(button).width);

// delay
setTimeout(function() {
    console.log("width 3: " + getComputedStyle(button).width);
}, 3000);

输出结果为：

width 1: 72.5312px
width 2: 82.6562px            <======   what I want is 86.5312px
width 3: 86.5312px
width onclick 3: 86.5312px
width onclick 3: 86.5312px
width onclick 3: 86.5312px

我尝试了一些关于“强制DOM更新”的方法：

button.style.display = 'none';
button.style.display = 'block';

或使用jquery

$(button).hide().show(0);

但它仍然无效......

更新

我试图删除按钮并只留下span元素，我发现我仍然无法获得正确的宽度值。

因此使用getComputedStyle获取span元素可能会出现问题。

var div = document.getElementById("div");

var span = document.createElement("span");
span.className = "glyphicon glyphicon-music";
div.appendChild(span);

console.log("width 1: " + getComputedStyle(span).width);

setTimeout(function() {
    console.log("width 2: " + getComputedStyle(span).width);
}, 3000);

输出是：

width 1: 10.125px
width 2: 14px