1px 虚线边框渲染 IE11/Edge

Question

注意到在 IE11/Edge 1px 虚线边框呈现时存在一些问题，在输入的某些部分更亮，而在某些部分更暗。

input {
  display: block;
  height: 23px;
  vertical-align: middle;
  font-size: 13px;
  margin: 0;
  min-width: 500px;
  padding: 0 10px;
  margin: 15px 0;
  color: #C2C2C2;
  background: #000000;
  border: 1px dotted black;
}

Image with 1px dotted border 即使我增加边框-> 2px，问题仍然存在。

Chrome/FF 看起来不错，这是解决此问题的简单方法，无需更改边框类型吗？ https://jsfiddle.net/eehLaogk/11/（在 IE11/Edge 中打开）

Answer 1

这似乎是浏览器错误。我可以在 IE11/Win7 上确认它会影响其他元素，而不仅仅是 input 字段。

经过一些测试，我发现当元素的尺寸为偶数时会出现问题，例如500px 宽或 40px 高。

使用 501px 宽和 41px 高这样的奇数是一种临时解决方法：

body {
 background: #181818;
}

input {
    display: block;
    padding: 0 10px;
    height: 40px;
    margin: 15px 0;
    color: #C2C2C2;
    background: #000;
    border: 1px dotted #FFF;
    outline: none;
    width: 500px;
}

#input2 { width: 501px; height: 41px; }

<input id="input1" type="text" placeholder="500px wide (even)">
<input id="input2" type="text" placeholder="501px wide (odd)">

1px 虚线边框渲染 IE11/Edge

1px dotted border render in IE11/Edge

css

internet-explorer

border

dotted-line

microsoft-edge