html - 顶部 :1px calculated differently in chrome and FF

Question

我最近正在调试一个网站 SEE HERE ，现在，如果您滚动到紧跟在横幅之后的部分，即带有 Accordion 的部分。

从上图中可以看出，事件选项卡有一个向上的顶部箭头。 css代码如下:

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    font-weight: 900;
    position: relative;
    top: 1px;
    background: url(../images/res/active-accordion-tab.jpg) no-repeat center bottom;
}

请注意 postion:relative 和 top:1px 是如何用来覆盖从下方经过的边框的，给人的印象是 active 只有一个箭头而没有底部边界。现在这在 chrome 中工作正常，但在 FF 中存在一个小问题，1px 不能使箭头向下足以覆盖边框，事件选项卡上的箭头如下所示:

看看箭头是如何覆盖底部边框的。这个有什么解决办法？？

附言我不能使用 top:2px 因为那样在 chrome 中看起来有点糟糕。

Answer 1

实际上，这取决于操作系统级别和浏览器级别的缩放。看起来您的字体实际上没有粗体字形，因此要应用 font-weight: bold，浏览器必须根据正常字形生成粗体字形，并且以不同方式执行此操作.

鉴于您的菜单项是 inline-block，您应该向它们添加 vertical-align: bottom 以使它们的底部边缘位置不受光栅化舍入错误的影响因此可预测且跨浏览器一致:

.hm-our-products-main-showcase .accordion-list-items > li {
    vertical-align: bottom;
}

顺便说一句，我建议您不要将事件链接本身移动 1px 到底部(即从 position: relative; top: 1px; 中移除事件链接的样式)，并使用绝对定位的 CSS 生成的伪元素代替:

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    position: relative;
}

.hm-our-products-main-showcase .accordion-list-items > li.active > a:after {
    background: url(active-accordion-tab.jpg) no-repeat;
    content: '';
    margin-left: -7px; /* Half the width to center the arrow. */
    position: absolute;
    left: 50%;
    bottom: -1px; /* Compensating menu's border-bottom. */
    width: 14px;
    height: 8px;
}