引导徽章在IE中无法正确呈现

Question

我正在开发一个项目，其中使用徽章来表示某个类别中的项目数。这是代码的精简版本：

<div class="btn-group">
    <button style="position: relative; min-width: 105px;" type="button" class="btn btn-default btn-group-active">NEW <span class="badge label-bad-custom" style="position: absolute; top: -10px; right: 5px;">1</span>
    </button>
    <button style="position: relative; min-width: 105px;" type="button" class="btn btn-default">Old <span class="badge label-bad-custom" style="position: absolute; top: -10px; right: 5px;">2</span>
    </button>
</div>

在Chrome中，它会根据需要进行渲染：

在IE中，它不是：

我不是一个CSS向导，但是我在div / button / span上玩了填充/边距无济于事。

我正在使用IE 11进行测试。

非常感谢任何帮助。

Answer 1

button {
  width: auto;
  overflow: visible;
}

按钮不应包含在表格元素中，以使此修复工作