1px gepunktete Grenze Render in IE11/Edge

Question

Bemerken, dass in IE11/Edge 1px gepunktete Grenze mit einigen Problemen rendert, in einigen Teilen der Eingabe ist es heller und in einigen - dunkler.

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 auch wenn ich Grenze erhöhen -> 2px, das Problem weiterhin besteht.

Chrome/FF sieht gut aus, ist das ein einfacher Weg, dies zu lösen, nicht den Randtyp zu ändern? https://jsfiddle.net/eehLaogk/11/ (in IE11/Edge öffnen)

Answer 1

Es scheint ein Browserfehler zu sein. Ich kann auf IE11/Win7 bestätigen und es betrifft andere Elemente, nicht nur input Felder.

Nach einigen Tests fand ich heraus, dass das Problem auftritt, wenn die Abmessungen des Elements sind gerade Zahlen, z. 500px breit oder 40px hoch.

Mit ungeraden Zahlen wie 501px breit und 41px hoch ist eine vorübergehende Lösung:

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