I have a weird problem in a project I'm working on. Firefox (22) magically eats up 1 pixel of my border. All other browsers are fine.
Now, the layout is really complex and I can't show all the code, but I hope this is the relevant part:
HTML
<div class="carouselitem unselectable photo selected">
<img alt="" src="https://example.com/something.jpg" class="carouselimg">
<div class="typeicon"></div>
</div>
CSS
.mediacarousel .carouselitem.selected {
border: 5px solid white;
height: 71px;
opacity: 1;
width: 136px;
}
.mediacarousel .carouselitem:hover .carouselimg,
.mediacarousel .carouselitem.selected .carouselimg {
left: -5px;
position: relative;
top: -5px;
}
.mediacarousel .carouselitem,
.mediacarousel .carouselimg {
width: 146px;
}
.mediacarousel .carouselimg {
vertical-align: top;
}
.mediacarousel .carouselarrow, .mediacarousel .carouselscroller,
.mediacarousel .carouselitems, .mediacarousel .carouselitem, .mediacarousel .carouselimg {
height: 81px;
}
img, .unselectable {
-moz-user-select: none;
}
.mediacarousel .carouselitem .typeicon {
display: none;
filter: inherit;
}
Firebug shows this:
Uhm, 4.8px, seriously? CSS looks good:
But, 1 complete pixel is somehow disappearing...
I have never seen something like this, and I had no success in finding the root of the evil. So my question is:
What exactly may be the cause for this? Is it a known bug?
Edit:
Turns out this only happens when the font size in Windows 7 is set to 125%. Still not something you would expect. Here's a fiddle where you can try yourself: http://jsfiddle.net/mdynm/1
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…