我正在处理的项目中有一个奇怪的问题。 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个完整的像素正在以某种方式消失......
我从未见过这样的事情,而且我找不到邪恶的根源也没有成功。所以我的问题是:
究竟是什么原因造成的呢?这是一个已知的错误吗?
修改的:
事实证明这只发生在font size in Windows 7 is set to 125%。仍然不是你期望的东西。这是一个小提琴,您可以尝试自己:http://jsfiddle.net/mdynm/1
答案 0 :(得分:6)
事实证明,只有在font size in Windows 7设置为100%以外的情况时才会发生这种情况。
报告为Firefox中的错误:
https://bugzilla.mozilla.org/show_bug.cgi?id=890383