注意到在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中打开)
最佳答案 它似乎确实是一个浏览器错误.我可以在IE11 / Win7上确认,它会影响其他元素,而不仅仅是输入字段.
经过一些测试后,我发现当元素的尺寸是偶数时会出现问题,例如: 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)">