获取Bootstrap按钮的内部宽度（crossbrowser）

Question

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

function compare_names($a, $b)
{
    return strcmp($a->name, $b->name);
}
$newarr = array_udiff($b, $a, 'compare_names');

jquery的

<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>

1. 如果在按钮点击事件之前或之后拍摄，则innerWidth不相等
2. 使用的每个浏览器（IE10，Firefox。Chrome）的行为都不同

Bootply

我可以使用crossbrowser解决方案在点击事件之前和之后获得相同的大小吗？ 感谢

Answer 1

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

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

Bootply of edited code with css

Answer 2

“之前和之后不相等”的问题是因为css styles：active，：focus，：hover具有轮廓。在这种情况下，您最好使用开发人员工具并在以下情况下检查您的css代码：active，：focus，：hover。

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