Html 根据浏览器的不同，标签在div中具有不同的内部填充

我有一个容器，里面有一个图标和一个标签。我使用flexbox将图标和标签与容器底部对齐

我注意到，根据浏览器（例如，Chrome和FF），容器底部到标签中文本的距离相差约1px

我玩了线高和图标+标签的不同布局，但我无法摆脱这个1px的差异。 图标在该布局中不起任何作用，但我添加了它，因为图标的存在我关心对齐这个像素

_________此行位于不同的级别，具体取决于浏览器_______
.集装箱{
显示器：flex；
对齐项目：柔性端；
颜色：$蓝色；
游标：默认值；
文字装饰：无；
边框：1px纯红；
线高：18px
}
.图标{
背景大小：2rem2rem；
高度：2em；
宽度：2em；
边框：1px纯蓝色；
线高：18px
}
.标签{
光标：指针；
边框：1px纯绿色；
线高：18px
}

---

你知道如何在不同的浏览器中使标签与容器底部的距离相等吗？

♦ 在css>中的

.container{}

中，只需添加：

 z-index:0;

我在3个浏览器中测试了它，即chrome+safari+firefox，以及它在所有浏览器中的工作情况：

☼ 注意：z-index对定位元素列表起作用，如：
（位置：绝对，位置：相对，位置：固定）或（显示：弹性）

---

♦ 在css>中的

.container{}

中，只需添加：

 z-index:0;

我在3个浏览器中测试了它，即chrome+safari+firefox，以及它在所有浏览器中的工作情况：

☼ 注意：z-index对定位元素列表起作用，如：
（位置：绝对，位置：相对，位置：固定）或（显示：弹性）

---

必须承认，我用像素尺测量，看不到任何特殊的差异经过长时间的测试，我找到了解决这个问题的方法，我更新了下面的帖子。请看一看必须承认，我用像素尺测量，看不到任何特殊的差异。经过长时间的测试，我找到了解决这个问题的方法我在下面更新了我的帖子，请看一看