我在一个项目中遇到了一个奇怪的问题。 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显示:
Uhm,4.8px,认真吗? CSS看起来不错:
但是,1个完整的像素在某种程度上消失了
我从来没有看到过这样的东西,我没有成功找到邪恶的根源。所以我的问题是:
究竟可能是什么原因呢?这是一个已知的bug吗?
编辑:
原来这只是发生在font size in Windows 7 is set to 125%.仍然不是你会期望的东西。这是一个小提琴,你可以尝试自己:http://jsfiddle.net/mdynm/1
解决方法
事实证明,只有当
font size in Windows 7设置为100%以外的时候才会发生。
在Firefox中报告为错误:
https://bugzilla.mozilla.org/show_bug.cgi?id=890383