Button not laid out against top of relatively positioned container in Firefox - css

Question

I'm building a toggle switch and the head (button) isn't positioned all the way to the top as I'd expect it to be in Firefox. Works fine in Chrome, so maybe has something to do with default browser styles?
Edit: I know how to make it work, I want to know why it happens.
codepen https://codepen.io/warhammered_cat/pen/qBZYZVy
const toggleSwitch = document.querySelector('.toggle-switch')
const toggleSwitchHead = document.querySelector('.head')
function handleToggle(e) {
toggleSwitch.classList.toggle('active')
}
toggleSwitchHead.addEventListener('click', handleToggle)
* {
box-sizing: border-box;
}
document, body {
margin: 0;
padding: 0;
}
.head {
width: 1.25rem;
height: 1.25rem;
border: 0.125rem solid gray;
border-radius: 50%;
background-color: white;
cursor: pointer;
transition: all 0.4s;
outline: none;
box-shadow: none;
}
.rail {
height: 0.75rem;
width: 100%;
background-color: gray;
border: 0.125rem solid gray;
position: absolute;
top: 0.25rem;
z-index: -1;
border-radius: 0.3rem;
transition: all 0.4s;
}
.toggle-switch {
position: relative;
height: 1.25rem;
width: 2rem;
}
.toggle-switch.active > .head {
background-color: #F7941E;
border-color: #F7841E;
transform: translateX(1rem);
}
.toggle-switch.active > .rail {
border: 0.125rem solid #F7941E;
background-color: white;
}
<div class='toggle-switch'>
<button class='head'></button>
<div class='rail'></div>
</div>

Answer 1

The <button> element is what is specifically being rendered differently in Firefox and Chrome.
If you change the <button> to a <div> the problem fixes itself.
The reason is that the button element is not a block element by default. You have to explicitly set the button to be a block element to get the desired behavior.
.head {
...
display: block;
...
}

Answer 2

try this instead,
Add display:inline-flex; to head class
.head{
display:inline-flex;
}
Click below to see codepen demo
Result :
const toggleSwitch = document.querySelector('.toggle-switch')
const toggleSwitchHead = document.querySelector('.head')
function handleToggle(e) {
toggleSwitch.classList.toggle('active')
}
toggleSwitchHead.addEventListener('click', handleToggle)
* {
box-sizing: border-box;
}
document, body {
margin: 0;
padding: 0;
}
.head {
width: 1.25rem;
height: 1.25rem;
border: 0.125rem solid gray;
border-radius: 50%;
background-color: white;
cursor: pointer;
transition: all 0.4s;
outline: none;
box-shadow: none;
display:inline-flex;
}
.rail {
height: 0.75rem;
width: 100%;
background-color: gray;
border: 0.125rem solid gray;
position: absolute;
top: 0.25rem;
z-index: -1;
border-radius: 0.3rem;
transition: all 0.4s;
}
.toggle-switch {
position: relative;
height: 1.25rem;
width: 2rem;
}
.toggle-switch.active > .head {
background-color: #F7941E;
border-color: #F7841E;
transform: translateX(1rem);
}
.toggle-switch.active > .rail {
border: 0.125rem solid #F7941E;
background-color: white;
}
<div class='toggle-switch'>
<button class='head'></button>
<div class='rail'></div>
</div>