The problem with the spam flag markers (or at least, the immediate problem with them; their styling is kind of screwy in general) is that they have whitespace both inside and outside the marker span:
<div class="flag-spam-offensive">
flagged as <span class="bounty-indicator-tab flagbg bounty-fix"> spam </span> <span class="flag-outcome Helpful">
helpful
</span>
(Yes, this is copy-pasted verbatim from the HTML source; the indentation really is that messed up.)
The reason this is a problem is that browsers will, of course, collapse all that consecutive whitespace into a single space. But, apparently, they don't really agree on whether these spaces should be considered to be inside the span, or outside it.
My Firefox, at least, is (internally) consistent: it always collapses the spaces to the left, so that the space before the span is considered to be outside it, but the space after the span is considered to be inside it. Alas, this makes the rendering look kind of ugly:

This wasn't a problem in the old design, because the bounty-indicator-tab
class was styled as display: inline-block
. However, the new design has display: inline
instead, triggering all these whitespace issues.
(This is not unique to the flagging history page, by the way. The same class name is also (ab)used in other places, like for the "flags remaining" indicator in the flagging dialog, which also exhibits funny spacing.)
The easiest way to fix this would be to simply re-style these markers as inline-blocks again.
If, for some reason, this is not desirable, an alternative solution would be to remove the spaces from the HTML inside them (or to replace them with
, if the extra space is actually seen as desirable). However, finding all the places in the SE codebase where this class (and its friends, like mod-flag-indicator
) is used may take some digging.
In the mean time, I have added the display: inline-block
style to the devel branch of SOUP. Here's what the markers look like with that fix:

If this fix doesn't cause any unexpected breakage (or unless the bug is properly fixed in the mean time), it will be part of the next stable SOUP release, v1.30.
Update: It turns out that this fix does break things in (at least) one place, namely in the user profile tabs (which this class presumably was originally intended for). For now, I've addressed this simply by adding an extra rule to undo it there:
body .bounty-indicator-tab { display: inline-block }
#tabs .bounty-indicator-tab { display: inline }
I've also limited this fix to SO and MSO for now; hopefully the bug will be properly fixed by the time the re-design is extended to other SE sites.
Ps. I did find yet another alternative solution, which prevents spaces inside the markers from being collapsed with those outside it, while still using display: inline
. It's kind of a hack, but for posterity, here it is:
.bounty-indicator-tab:before, .bounty-indicator-tab:after { content: '\FEFF' }
Yes, that's a Unicode Zero Width No-Break Space (U+FEFF, a.k.a. Byte Order Mark). Here's what the markers would look like with it:
