Q: Bootstrap: span inside span doesn't display right on Firefox and IE Using this HTML below:
<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>

and 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/
At left is what I get on Chrome (latest version) and at right is on Firefox (v24) and IE8
screenshot
Screenshot from Chrome is what I intended..

A: There's no need to nest elements to get what you're after. Twitter didn't intend for that, and it's causing more headaches than you need. Here's one option:
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;
}

