Html 转换：在Firefox中翻译不精确？

我刚刚创建了一个自定义选择弹出窗口。现在在其他浏览器中查看它，我无法避免，但注意到单选按钮Firefox中白色“点”的微小偏移。Chrome和Edge可以很好地显示，但Firefow不会。出于好奇，我想知道，为什么会这样？如何避免

---

点“：

&::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--light);
  transform: translate(-50%, -50%);
}

input[type=radio] {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 0;
  border-radius: 50%;
  border: solid 1px var(--light-contrast);
  background-color: var(--light);
  appearance: none;
  cursor: pointer;
  
  &:checked {
    border-color: var(--accent);
    background-color: var(--accent);
  }
  
  &:focus {
    outline: 0;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--light);
    transform: translate(-50%, -50%);
  }
}

整个单选按钮：

&::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--light);
  transform: translate(-50%, -50%);
}

input[type=radio] {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 0;
  border-radius: 50%;
  border: solid 1px var(--light-contrast);
  background-color: var(--light);
  appearance: none;
  cursor: pointer;
  
  &:checked {
    border-color: var(--accent);
    background-color: var(--accent);
  }
  
  &:focus {
    outline: 0;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--light);
    transform: translate(-50%, -50%);
  }
}

整个片段：

&::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: var(--light);
  transform: translate(-50%, -50%);
}

input[type=radio] {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 0;
  border-radius: 50%;
  border: solid 1px var(--light-contrast);
  background-color: var(--light);
  appearance: none;
  cursor: pointer;
  
  &:checked {
    border-color: var(--accent);
    background-color: var(--accent);
  }
  
  &:focus {
    outline: 0;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: var(--light);
    transform: translate(-50%, -50%);
  }
}

：根目录{
--黑暗：#212121；
--暗对比度：#4242；
--灯光：#fafafa；
--光对比度：#cfd8dc；
--口音：#2196f3；
}
*,
：：之后，
：：之前{
框大小：边框框；
}
html{
字体系列：“Roboto”，无衬线；
字号：1rem；
线高：1.5；
}
身体{
显示：网格；
放置项目：中心；
高度：100vh；
保证金：0；
背景色：var（--暗）；
}
李先生{
保证金：0；
填充：0；
列表样式：无；
}
.选择{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
宽度：100%；
最大宽度：300px；
背景色：var（--暗对比度）；
颜色：#fff；
盒影：0 2px4px-1pxRGBA（0,0,0,0.25）；
光标：指针；
用户选择：无；
填充：1.25雷姆1.5雷姆；
边界半径：4px；
}
.选择：焦点{
大纲：0；
}
.选择：焦点.列表{
不透明度：1；
转换：转换（-50%，-50%）比例（1）；
指针事件：全部；
}
。选择：悬停{
背景色：#4848；
}
.选择：：之后{
显示：内联块；
内容：''；
左边框：.3755rem实心透明；
右边框：.3755rem实心透明；
边框顶部：.375rem实心#fff；
}
.选择.列表{
位置：固定；
最高：50%；
左：50%；
宽度：夹钳（300px，75vw，320px）；
边界半径：4px；
背景色：var（--光）；
颜色：#000；
转换：转换（-50%，-50%）比例（0）；
过渡：所有400ms缓解；
不透明度：0；
指针事件：无；
溢出：隐藏；
}
.选择。列出标签{
显示器：flex；
对齐项目：居中；
填充：1.25雷姆1.5雷姆；
光标：指针；
}
.选择.列表标签：悬停{
背景色：#ededed；
}
.选择。列表标签：活动{
背景色：#e1e1；
过渡时间：200ms；
}
.选择.列表标签输入[类型=收音机]{
右边距：1rem；
}
输入[类型=收音机]{
位置：相对位置；
高度：24px；
宽度：24px；
保证金：0；
边界半径：50%；
边框：实心1px var（--光对比度）；
背景色：var（--光）；
外观：无；
光标：指针；
}
输入[类型=收音机]：已选中{
边框颜色：var（--重音）；
背景色：var（--重音）；
}
输入[类型=收音机]：焦点{
大纲：0；
}
输入[类型=收音机]：：之前{
内容：''；
位置：绝对位置；
最高：50%；
左：50%；
宽度：50%；
身高：50%；
边界半径：50%；
背景色：var（--光）；
转换：翻译（-50%，-50%）；
}

挑选
铬
游猎
火狐

不同浏览器对亚像素渲染的处理方式不同。 正如《华盛顿邮报》所述：

[…]问题源于浏览器之间对亚像素演算的不同方法

另外：没有跨浏览器解决方案，但只有跨浏览器处理子像素渲染的方法不同。 正如《华盛顿邮报》所述：

[…]问题源于浏览器之间对亚像素演算的不同方法

---

另外：没有跨浏览器解决方案，但只有解决办法，在最新的Firefox中查看的代码段和代码笔链接看起来都是完美的。一定是别的什么东西把这个位置弄丢了。顺便说一句，我只发现Chrome在转换时有一个显示错误。这是一个亚像素的问题。您的输入是

24px

宽，您的前

11px

宽，将

13px

等分分派。@Simplicius简短回答：是。@Simplicius确定。我在这里有一个古老的答案：@SJacks，谢谢，我来看看。你的代码片段和在最新的Firefox中查看的代码笔链接看起来都是完全一致的。一定是别的什么东西把这个位置弄丢了。顺便说一句，我只发现Chrome在转换时有一个显示错误。这是一个亚像素的问题。您的输入是

24px

宽，您的前

11px

宽，将

13px

等分分派。@Simplicius简短回答：是。@Simplicius确定。我在这里有一个古老的答案：@SJacks，谢谢，我会调查一下的。