CSS浮动IE9 x Chrome

Question

我能够在IE9中显示它，但在Chrome中，数字会下降。尝试为Chrome修复此问题：

http://jsfiddle.net/we17rtoc/

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th></th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
            <th>AAAA</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 21px;'><span style='text-align: center; float: left; width: 22px; height: 22px; border: 2px solid #5cb85c; border-radius: 100%; background-color: #f0ad4e; color: white;'>6</span></td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
    </tbody>
</table>

感谢您的任何信息。

Answer 1

删除float并将display: inline-block设置为包含数字的范围。

DEMO：https://jsfiddle.net/lmgonzalves/we17rtoc/4/