top：1px在chrome和FF

Question

我刚刚调试网站 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没有足够的箭头来覆盖边框，活动选项卡上的箭头如下所示：

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

P.S。我无法使用top:2px，因为在Chrome中看起来有些不好。

Answer 1

实际上，这取决于操作系统级别和浏览器级别的缩放。看起来您的字体实际上没有粗体字形，因此要应用$scope.example = function(scope, key) { delete scope[key]; }; ，浏览器必须根据普通字形生成粗体字形，并以不同执行此操作。

鉴于您的菜单项为font-weight: bold s，您应该向其添加inline-block，因为它们的下边缘位置不受光栅化舍入错误的影响，因此可以跨浏览器进行预测和一致：

vertical-align: bottom

顺便说一句，我建议你摆脱将活动链接本身移动到.hm-our-products-main-showcase .accordion-list-items > li { vertical-align: bottom; } 到底部（即从活动链接的样式中删除1px），并使用绝对定位的CSS生成的伪元素代替：

position: relative; top: 1px;

Answer 2

将您的N更改为top:1px，它在两个浏览器上都运行正常，即top:1.5px和Chrome。

Firefox

Answer 3

这是因为它为不同的浏览器显示不同的字体大小。有一点不同。

解决这个问题：

使用：

scala> y
<console>:18: error: not found: value y

从.accordion-list-items > li.active { font-weight: 900; vertical-align: top; }

中删除font-weight: 900;

Reference link:

  

font-weight属性设置字体的权重或厚度，并且取决于字体系列中的可用字体面或浏览器定义的权重 。

     

如果字体具有粗体（＆＃34; 700＆＃34;）或普通（＆＃34; 400＆＃34;）版本作为字体系列的一部分，则浏览器将使用该字体。如果没有，浏览器将模仿其自己的粗体或正常版本的字体。

Answer 4

您使用展示inline-block，您应该添加vertical-align:top

添加vertical-align: top;此课程

.hm-our-products-main-showcase .accordion-list-items > li > a {
    color: #000;
    padding-bottom: 1.25em;
    display: inline-block;
    vertical-align: top;
}

Answer 5

从此处删除ServiceTwo

padding-bottom: 1.25em;

并在此处添加

.hm-our-products-main-showcase .accordion-list-items > li > a {
    color: #000;
    padding-bottom: 1.25em;
    display: inline-block;
}

这应解决填充问题，并使其在Chrome和Firefox中看起来都一样。

Answer 6

using System;                   
public class Program
{
    public static void Main()
    {
        string s = "1234567890";
        int i = int.Parse(s);
        Console.WriteLine("Hello World");       
        string test = string.Format("{0:0-#######-#}", i);
        Console.WriteLine(test);            
    }
}

将try this .hm-our-products-main-showcase .accordion-list-items > li { display: inline-block; text-transform: uppercase; vertical-align: top; } 提供给您的li元素，因为您在使用vertical-align: top;时使用display: inline-block;我们应该垂直对齐以避免此类问题。