Css 在Firefox中，按钮未放置在相对位置的容器顶部

我正在构建一个切换开关，而头部（按钮）并不像我在Firefox中预期的那样一直位于顶部。在Chrome中运行良好，所以可能与默认浏览器样式有关

编辑：我知道如何让它工作，我想知道它为什么会发生

const-toggleSwitch=document.querySelector（“.toggle-switch”）
const-toggleSwitchHead=document.querySelector（“.head”）
功能手柄（e）{
toggleSwitch.classList.toggle（'active'）
}
toggleSwitchHead.addEventListener（'click'，handleToggle）

*{
框大小：边框框；
}
文件、正文{
保证金：0；
填充：0；
}
.头{
宽度：1.25雷姆；
高度：1.25雷姆；
边框：0.125rem实心灰色；
边界半径：50%；
背景色：白色；
光标：指针；
过渡：全部为0.4s；
大纲：无；
盒影：无；
}
.铁路{
高度：0.75雷姆；
宽度：100%；
背景颜色：灰色；
边框：0.125rem实心灰色；
位置：绝对位置；
顶部：0.25雷姆；
z指数：-1；
边界半径：0.3rem；
过渡：全部为0.4s；
}
.拨动开关{
位置：相对位置；
高度：1.25雷姆；
宽度：2em；
}
.toggle-switch.active>.head{
背景色：#F7941E；
边框颜色：#F7841E；
转化：translateX（1rem）；
}
.toggle-switch.active>.rail{
边框：0.125rem实心#F7941E；
背景色：白色；
}

试试这个

添加

display:inlineflex至头部类

.head{
    display:inline-flex;
}

单击下面的查看代码笔演示


结果：




const-toggleSwitch=document.querySelector（“.toggle-switch”）
const-toggleSwitchHead=document.querySelector（“.head”）
功能手柄（e）{
toggleSwitch.classList.toggle（'active'）
}
toggleSwitchHead.addEventListener（'click'，handleToggle）
*{
框大小：边框框；
}
文件、正文{
保证金：0；
填充：0；
}
.头{
宽度：1.25雷姆；
高度：1.25雷姆；
边框：0.125rem实心灰色；
边界半径：50%；
背景色：白色；
光标：指针；
过渡：全部为0.4s；
大纲：无；
盒影：无；
显示：内联flex；
}
.铁路{
高度：0.75雷姆；
宽度：100%；
背景颜色：灰色；
边框：0.125rem实心灰色；
位置：绝对位置；
顶部：0.25雷姆；
z指数：-1；
边界半径：0.3rem；
过渡：全部为0.4s；
}
.拨动开关{
位置：相对位置；
高度：1.25雷姆；
宽度：2em；
}
.toggle-switch.active>.head{
背景色：#F7941E；
边框颜色：#F7841E；
转化：translateX（1rem）；
}
.toggle-switch.active>.rail{
边框：0.125rem实心#F7941E；
背景色：白色；
}

元素是Firefox和Chrome中呈现不同的元素

如果将
更改为
，问题会自行修复

原因是按钮元素在默认情况下不是
块
元素。必须将按钮显式设置为
块
元素，才能获得所需的行为

.head {
    ...
    display: block;
    ...
}

这会在Chrome中破坏它，不管怎样，没有解释为什么会发生这种情况。现在试试：）它现在在chrome和firefox中工作，更新了我的答案。那么为什么它有一个内联块的显示会导致它不能在firefox中相对定位的祖先中位于顶部？firefox和chrome对按钮元素的实现略有不同。Chrome为它重置了Firefox没有的样式。我认为它不是按钮元素，而是具有内联块显示的元素。看看这个。Chrome和Firefox的字体和线条高度不同，所以主体（包含按钮）的高度不同。嗯……Firefox上的有趣行为。如果您转到该代码笔并向按钮添加文本，它将修复Firefox中的问题。