html – top：1px在chrome和FF中的计算方式不同

概述我刚刚调试了一个站点 SEE HERE,现在如果你滚动到横幅之后的那个部分,那就是带有accodion的部分. 从上图中可以看出,活动选项卡的顶部箭头朝上. css代码如下： .hm-our-products-main-showcase .accordion-list-items > li.active > a { font-weight: 900; position: relat 我刚刚调试了一个站点 SEE HERE,现在如果你滚动到横幅之后的那个部分,那就是带有accodion的部分.

从上图中可以看出,活动选项卡的顶部箭头朝上. 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用于覆盖从下面经过的边框,给人的印象是只有一个箭头而没有底边框的活动.现在这在Chrome中运行良好,但在FF中有一个小问题,1px不能完全让箭头向下覆盖边框,活动选项卡上的箭头如下所示：

看看箭头如何覆盖底部边框.这是什么解决方案？

附：我不能使用top：2px因为那时在Chrome中看起来有点不好看.

解决方法 实际上,这取决于 *** 作系统级别和浏览器级别的缩放.看起来您的字体实际上没有粗体字形,因此要应用Font-weight：bold,浏览器会强制基于正常字形生成粗体字形并以不同方式执行此 *** 作.

鉴于您的菜单项是内联块,您应该为它们的下边缘位置添加vertical-align：bottom,使其不受光栅化舍入错误的影响,因此可以跨浏览器进行预测和一致：

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

顺便说一句,我建议你摆脱将活动链接本身移动1px到底部(即移除位置：相对;顶部：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;}

总结

以上是内存溢出为你收集整理的html – top：1px在chrome和FF中的计算方式不同全部内容，希望文章能够帮你解决html – top：1px在chrome和FF中的计算方式不同所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。