1259972 - Badge in Bootstrap tabs widget causes borders to unexpectedly not overlap

Status: NEW

(Core :: Layout, defect)

Description

[Chris Rebert]

Attachment: Screenshot of incorrect rendering in Firefox 47

Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/19626
Affected Platforms: OS X, Linux
(Doesn't seem to affect Windows)

Simplified testcase: https://jsbin.com/heloge/edit?html,css,output
Original testcase: http://jsbin.com/qekubi/1/edit?html,css,output

Steps to reproduce:
1. Open the testcase in Firefox 47.

Expected results:
There should be no bottom border line on the active tab in either set of tabs.
(Which is how Chrome, Safari, and MS Edge render the testcases. See attached Chrome screenshot.)

Actual results:
There is a thin bottom border line on the active tab in the 1st set of tabs.
See attached Firefox screenshot.

More info:
The bug only occurs when the `<span class="badge">1</span>` is present