我正在从事的项目中有一个奇怪的问题。Firefox (22) 神奇地占用了我边框的 1 个像素。所有其他浏览器都很好。
现在，布局非常复杂，我无法显示所有代码，但我希望这是相关部分：
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 显示了这一点：
嗯，4.8px，认真的吗？CSS看起来不错：
但是，1 个完整的像素不知何故消失了……
我从来没有见过这样的事情，我也没有成功找到邪恶的根源。所以我的问题是：
这到底是什么原因？这是一个已知的错误吗？
编辑：
事实证明，这只发生在 Windows 7 中的字体大小设置为 125%时。仍然不是你所期望的。这是一个你可以自己尝试的小提琴：http: //jsfiddle.net/mdynm/1