html - 边框样式在 Internet Explorer 11 中不起作用

Question

我创建了一个在 IE 浏览器中不工作的切换按钮。我对 web-kit 外观和边框有疑问。

这是我的代码的工作片段:

.contain {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    background: #d6d6d6;
    border-radius: 20px;
    margin: 10px;
}

.checkbox {
    position: absolute;
    width: 28px;
    height: 28px;
    -webkit-appearance: none;
    background: white;
    border: 1px solid;
    border-radius: 50%;
    top: -5px;
    left: -10px;
    outline: none;
}

.checkbox:checked {
    left: 20px;
}

 <label class="contain" >
    <input type="checkbox" id="checkbox" class="checkbox" />
 </label>

边框在 Chrome 中没问题，但在 Internet-Explorer 中不应用边框半径。

Answer 1

问题似乎出在 .checkbox 元素上，您没有为其指定边框颜色，这可能就是您看不到边框的原因。

您可以将它添加到 border 属性的末尾，如下所示:

.checkbox {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -5px;
  left: -10px;
  -webkit-appearance: none;
  border: 1px solid red;
  border-radius: 50%;
  outline: none;
  background: white
}

或者您可以将 border 属性拆分为 border-width、border-style 和 border-color属性，像这样:

.checkbox {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -5px;
  left: -10px;
  -webkit-appearance: none;
  border-width: 1px;
  border-style: solid;
  border-color: red;
  border-radius: 50%;
  outline: none;
  background: white
}

您可以尝试做的另一件事是通过将边框的宽度 (1px) 更改为 2px/3px 来使边框变粗。

祝你好运。