修改HTML font-size后Bootstrap单选框白色圆点位置偏移如何解决

你遇到的问题是通配符*的全局样式覆盖了Bootstrap单选控件的预设规则导致的：

• Bootstrap的单选按钮（.form-check-input）的尺寸、内部选中圆点的定位都是基于em单位计算，em相对当前元素的font-size生效，你用通配符强制所有元素font-size:14px，还设置了全局height:100%，直接打乱了单选控件原本的尺寸计算逻辑，导致内部圆点定位偏移。
• 通配符会匹配所有元素，包括单选控件的伪元素、内部匿名渲染节点，Bootstrap预设的控件样式会被完全覆盖，自然显示异常。

方案1：修正全局样式的写法（最推荐） #

不要用通配符设置全局height和font-size，全局样式仅作用于根节点即可，Bootstrap的所有组件默认会继承根节点的字体配置：

/* 仅给需要占满高度的根元素设置height:100%，#app为你的项目根容器ID，按需修改即可 */
html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  /* 直接修改根字体大小，Bootstrap所有rem/em计算都会自动适配 */
  font-size: 14px;
}
body {
  font-family: 'Roboto', sans-serif;
}

这个方案不会破坏Bootstrap的样式规则，修改后单选按钮会自动适配14px的全局字体，不会出现偏移。

方案2：排除单选/复选控件的全局样式覆盖 #

如果你必须用通配符做全局设置，可以主动排除表单控件相关的元素和伪元素：

*:not(.form-check):not(.form-check-input):not(.form-check-label):not(.form-check-input::before):not(.form-check-input::after) {
  font-size: 14px;
  font-family: 'Roboto';
}
/* 根元素高度单独设置 */
html, body, #app {
  height: 100%;
}

方案3：强制重置单选控件样式 #

如果上述方案都不满足你的需求，可以单独给单选控件加样式强制修正偏移：

.form-check-input {
  height: 1em !important;
  width: 1em !important;
  margin-top: 0.25em !important;
  font-size: inherit !important;
}

内容的提问来源于stack exchange，提问作者Titus Sutio Fanpula