css - Bootstrap：跨度内的跨度在 Firefox 和 IE 上无法正确显示

Question

使用下面的 HTML：

<span class="label label-default record"> Total <span class="label badge-number">12</span></span><br>
<span class="label label-warning record"> Pending <span class="label badge-number">5</span></span><br>
<span class="label label-success record"> Active <span class="label badge-number">6</span></span><br>
<span class="label label-important record"> Inactive <span class="label badge-number">1</span></span>

和 CSS：

.record {
width: 84px;
height: 16px;
padding: 3px 0 3px 5px;
margin-bottom:2px;
}

.badge-number {
background-color: #666;
width: 26px;
height: 18px;
float: right;
text-align: right;
margin: -3px 0 0 0;
-webkit-border-bottom-left-radius:0;
-moz-border-bottom-left-radius:0;
border-bottom-left-radius:0;
-webkit-border-top-left-radius:0;
-moz-border-top-left-radius:0;
border-top-left-radius:0;
}

http://jsfiddle.net/eWSRX/

左边是我在 Chrome（最新版本）上得到的，右边是在 Firefox（v24）和 IE8 上得到的

截屏

Chrome的屏幕截图是我想要的..

Answer 1

无需嵌套元素即可获得所需的内容。Twitter 并不打算这样做，它引起的头痛超出了您的需要。这是一个选项：

http://jsfiddle.net/eWSRX/1/

<span class="label label-default record"> Total </span>
<span class="label badge-number">12</span>
...

.label {
    float: left; /* OR display: inline-block */
    height: 18px;
    padding: 3px;
}
.record {
    width: 84px;
    margin-bottom:2px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.badge-number {
    background-color: #666;
    width: 26px;
    text-align: right;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}