什么可能使Firefox呈现不正确的边框宽度？ [英] What could make Firefox render an incorrect border width?

问题描述

在我正在进行的项目中，我有一个奇怪的问题。 Firefox（22）神奇地吃了我的边界的1个像素。所有其他浏览器都可以。

现在，布局非常复杂，我不能显示所有的代码，但我希望这是相关的部分：

HTML

 < div class =carouselitem unselectable photo selected> 
< img alt =src =https://example.com/something.jpgclass =carouselimg> 
< div class =typeicon>< / div> 
< / div> 
  

CSS

  .mediacarousel .carouselitem.selected {
 border：5px纯白色; 
 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; 
 
 $ / code $ / pre 
 
 Firebug显示这个：
 
 
  
 
 
 4.8px，认真？ CSS看起来不错：
 
 
 
  
 
 
但是，1个完整像素在某种程度上正在消失...  
 
 
  
 
我从来没有见过这样的事情，而且我没有找到成功邪恶的根源。所以我的问题是：
 
究竟是什么原因呢？这是一个已知的错误吗？
 
 $ hr 
 $ b 
  ：
 
变成只有当Windows 7中的字体大小设置为125％。仍然不是你所期望的。这里有一个你可以尝试自己的小提琴： http://jsfiddle.net/mdynm/1   p> 
 
解决方案
原来这只发生在在Windows 7中的字体大小设置为不是100％。  
 
 
报告为Firefox中的错误：
 
  https://bugzilla.mozilla.org/show_bug.cgi?id=890383  
 
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
解决方案
Turns out this only happens when the font size in Windows 7 is set to something else than 100%. 

Reported as a bug in Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=890383

                        
这篇关于什么可能使Firefox呈现不正确的边框宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！