微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

html – 什么可以使Firefox渲染一个不正确的边框宽度?

我在一个项目中遇到了一个奇怪的问题。 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

原文地址:https://www.jb51.cc/html/232775.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐