在IE11 / Edge中渲染1px虚线边框

问题描述 投票:4回答:1

注意到在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中打开)

css internet-explorer border microsoft-edge dotted-line
1个回答
1
投票

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

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

使用像501px wide和41px high这样的奇数是暂时的解决方法:

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)">

ie11/edge dotted border bug

© www.soinside.com 2019 - 2024. All rights reserved.