Css 锚定标记的文本被附加到其框的顶部(仅限Firefox)

Css 锚定标记的文本被附加到其框的顶部(仅限Firefox),css,Css,我目前对锚定标记中的文本行为感到困惑,这似乎只发生在Firefox上。 文本粘在自己的框的顶部,因此当我在文本周围添加边框使其看起来像按钮时,文本不会垂直对齐 下面是我的用例的一个最小示例: 文件 身体{ 字体系列:Helvetica,无衬线; 高度:100vh; 宽度:100vw; 显示:网格; 证明内容:中心; 对齐内容:居中对齐; 背景色:#e4e7ed } div{ 利润率:0.20%; 填料:2米; 背景色:#fff; 边界半径:4px; 盒影:0 1px 3px rgba(0,0

我目前对锚定标记中的文本行为感到困惑,这似乎只发生在Firefox上。 文本粘在自己的框的顶部,因此当我在文本周围添加边框使其看起来像按钮时,文本不会垂直对齐

下面是我的用例的一个最小示例:


文件
身体{
字体系列:Helvetica,无衬线;
高度:100vh;
宽度:100vw;
显示:网格;
证明内容:中心;
对齐内容:居中对齐;
背景色:#e4e7ed
}
div{
利润率:0.20%;
填料:2米;
背景色:#fff;
边界半径:4px;
盒影:0 1px 3px rgba(0,0,0,0.3);
显示器:flex;
弯曲方向:立柱;
对齐项目:居中;
}
p{
文本对齐:居中;
}
a{
边框:1px实心#FF6600;
边界半径:4px;
填充:12px 20px;
背景:透明;
文字装饰:无;
颜色:#FF6600;
}
a:悬停{
背景色:#FF6600;
颜色:白色;
}

Lorem ipsum dolor sit amet,奉献精英。准quos nihil vero。

尝试属性:

a {
  border: 1px solid #FF6600;
  border-radius: 4px;
  padding: 12px 20px;
  background: transparent;
  text-decoration: none;
  color: #FF6600;
  line-height: 12px;
}


您可以根据字体大小调整行高。

您确定所有浏览器中的字体都相同吗?请尝试调整行高行高:1em@李斯特先生:是的。我更新了我的示例并明确定义了字体。@MoneerKamal:看来这就是解决方案。谢谢你的提示。对我有用。现在我只需要弄清楚为什么在我的实际项目中设置线高度没有同样的效果。以前玩过它,但因为没有效果而放弃了它。@j0weiss这可能是因为其他CSS规则覆盖了它。