在Firefox中使用bootstrap的单选按钮很模糊

Question

我正在使用boostrap来显示一些单选按钮。在Chrome和Edge中，按钮看起来很清晰，但在Firefox（52.0.2 32位）中，按钮非常模糊。

示例html：

<div class='container'>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="radio-button"><input class="form-control" name="radioName" type="radio" value="1"> Yes</label>
      <label class="radio-button"><input class="form-control" name="radioName" type="radio" value="0"> No</label>
    </div>
  </form>
</div>

示例css：

label.radio-button {
  align-items: center;
  display: inline-flex;
  height: 34px;
  margin: 0 15px 0 0;
}

label.radio-button input[type=radio] {
  border: none;
  box-shadow: none;
  display: inline-block;
  height: 30px;
  margin: 0 5px 0 0;
  width: 30px;
}

这是jsfiddle（https://jsfiddle.net/7zsp1oao/2/）

以下是示例图片：

铬

边缘

火狐