What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

They're missing several pixels + the right border.

Missing border

Observed in

  • Chrome 12.0.742.112 and 15.0.874.106 (on Windows 7)
  • Firefox 5? (see comments)
  • Opera (see this report)
share|improve this question
1  
+1 for making me add ponies and thingadongdong to my favorite tags –  balpha Jul 11 '11 at 14:02
1  
I don't believe this particular issue is actually reproducible in Firefox (I checked in various browsers). The answer below is referring to something else that looks kind of the same, I think. –  Tim Stone Jul 11 '11 at 14:13
2  
i'm looking into this –  Jin Sep 12 '11 at 8:43

4 Answers 4

up vote 8 down vote accepted

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.

share|improve this answer
1  
This has been around forever; not new and always specific to webkit. –  Jeff Atwood Jul 11 '11 at 15:45
    
Hm, I'm only able to reproduce this specific issue in Chrome though, and it only started a few months ago (but I ignored it at the time, since I'm on Chrome dev). Safari doesn't exhibit this behaviour, at least not here. –  Tim Stone Jul 11 '11 at 15:52
1  
I remember it being reported on superuser since forever, and SU has been around for over a year. You might be right about it being Chrome only, though. –  Jeff Atwood Jul 11 '11 at 17:06
    
Was just about to report this for Chrome 15.0.874.121 m –  Merlyn Morgan-Graham Dec 16 '11 at 11:56

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.

share|improve this answer
    
Cool, thanks for your work on this. –  Rob Hruska Jan 13 '12 at 22:03
    
+1 for using my sockpuppet's code! –  The Unhandled Exception Jan 13 '12 at 22:15
    
Yeah, I had poked around the WebKit source looking for what was causing this to submit a patch, but I wasn't able to narrow it down at the time. :/ –  Tim Stone Jan 13 '12 at 22:17
1  
@TheUnhandledException LIES!!! I am so much better looking than Tim Stone! –  Josh's Socks Jan 13 '12 at 22:18

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.

share|improve this answer

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;
share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .