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