获取引导按钮的innerWidth (跨浏览器)

Question

我试图获取引导按钮的大小(宽度)，但我有一些奇怪的行为。

<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <button type="button" class="btn btn-warning btn-sm">
             <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span> Save This Item
        </button>
    </div>
</div>

jquery

var siHeight = $('button').innerHeight();
var siWidth = $('button').innerWidth();

$('button').on('click', function() {

   var iHeight = $('button').innerHeight();
   var iWidth = $('button').innerWidth();

   alert("On click H x W" + iHeight + " x " + iWidth + " Before click H x W " + siHeight + " x " + siWidth);

});

1. 如果在按钮单击事件之前或之后采取innerWidth，则不等于
2. 不同的浏览器(IE10，火狐)的行为是不同的。铬)

引线

在使用跨浏览器解决方案单击事件之前和之后，我是否可以获得相同的大小？谢谢

Answer 1

单击按钮时，必须添加一些CSS才能使按钮不更改：

.btn:focus,.btn:active {
     outline: none !important;
}

用css引导已编辑代码

Answer 2

“前后不相等”的问题在于css样式:活动、：焦点、：悬停有大纲。在这种情况下，您最好使用开发人员工具，并在以下情况下检查css代码:active，:focus，：悬浮。

​

​

另一方面，您可以简单地使用宽度而不是innerWidth。