У меня есть странная проблема в проекте, над которым я работаю. 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 полный пиксель как-то исчезает...
Я никогда не видел ничего подобного, и мне не удалось найти корень зла. Итак, мой вопрос:
Что именно может быть причиной этого? Это известная ошибка?
Edit:
Оказывается, это происходит только тогда, когда размер шрифта в Windows 7 установлен на 125%. Все еще не то, что вы ожидаете. Здесь скрипка, где вы можете попробовать себя: http://jsfiddle.net/mdynm/1