They're missing several pixels + the right border.
Observed in
- Chrome 12.0.742.112 and 15.0.874.106 (on Windows 7)
Firefox 5? (see comments)- Opera (see this report)
Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.
Sign up to join this communityThey're missing several pixels + the right border.
Observed in
I'm fairly confident that this is a render bug in Chrome, which appears to be caused by the fact that the line wrap occurs at the end of an inline
element that contains an inline-block
element on its outermost edge.
It's also possible that this is a defined behaviour somewhere in the CSS3 specification since this issue only started appearing recently, but I haven't had time to check. It seems like rather undesirable behaviour though, so I'm still leaning towards bug.
That being said, it's fixable with a bit of a hack and without having to overhaul all of the CSS that's in play there. Since the edge is displayed so long as there's inline content at the end of the tag <a>
, it's possible to just give it some:
#interestingTags .post-tag:after {
content: '\200B';
}
Injecting a zero-width space counts for the purposes of rendering, but doesn't impact the expected display, nor does it interfere with the tag handling JavaScript.
I was hoping the Chrome team would fix this weird bug, but it doesn't look like they will. We have deployed the fix Tim Stone suggested. It will be in the next production build.
I can see a similar effect in FF5.
On SO, the last digit of the number of questions is incomplete: 1,822,31?
But I blame the browser, probably the zoom factor.
Ah, I created duplicate here, but with the solution, so I'd move it there:
In Opera the tags on the second line and further don't have padding at the start, in Webkit there are no right padding and border on all lines except the last.
To fix it you can change the display
of tags from inline
to inline-block
(and change some other style according to it).
There is a jsfiddle with the current and fixed variants: http://jsfiddle.net/kizu/EaveS/
So, to fix it you must replace the following lines in the selector for the tags:
font-size: 90%;
line-height: 2.4;
to
display: inline-block;
font: 90%/1.2 Arial, sans-serif;
margin: .33em 2px .33em 0;