Javascript Safari的CSS修复复选框

Safari中的复选框覆盖了文本。在其他浏览器中没有问题。请看下面的图片和代码。其他帖子没有回答这个问题。我该如何解决这个问题

//来自React组件的复选框Div
新增：
setChecked（（选中）=>！选中）}
/>
/*下面是复选框样式*/
#CHX容器{
保证金：2.2雷姆0雷姆0.2雷姆；
}
#chxName{
位置：绝对位置；
页边顶部：1rem；
}
/*下面是全局复选框样式*/
“@global”：{
“.ui.checkbox”：{
保证金：“1.1雷姆0.5雷姆”，
宽度：“5雷姆”，
},
}

移除

位置：绝对位置来自
chxName
。如果它是
绝对
定位的，那么它将退出其正常流程。它应该是
位置：相对
或保留为默认的
位置：静态
非常感谢您的回复。这有点帮助，但与其他浏览器相比，复选框仍然非常接近按钮。只是添加了一些边距，效果很好。再次感谢。这是一个间隔问题。当然，您可以添加一些
边距
。
// Checkbox Div from React Component

               <div id="chxContainer">
                <p id="chxName">New:</p>
                <label className="four wide column">
                  <input
                    className="ui checkbox"
                    type="checkbox"
                    value="{checked}"
                    onChange={() => setChecked((checked) => !checked)}
                  />
                </label>
              </div>

/* below checkbox styles */

#chxContainer {
  margin: 2.2rem 0rem 0 2rem;
}

#chxName {
  position: absolute;
  margin-top: 1rem;
}

/* below Global checkbox styles */

"@global": {

 ".ui.checkbox": {
      margin: "1.1rem 0 0 0.5rem",
      width: "5rem",
    },
}