1px在IE11 /边缘虚线边框渲染

2016-06-07 61 views 4 likes

注意到在IE11/Edge 1px虚线边框渲染时会出现一些问题，在某些输入区域它会更亮，而且会更暗一些。1px在IE11 /边缘虚线边框渲染

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中打开）

来源

2016-06-07 dieTrying

我没有与我边，所以我无法测试，但从外观来看，它看起来像是一个浏览器错误。所以很荣幸找到了。想要提交错误报告？ https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/ –

有没有机会使用高分辨率显示器？ – aardrian

回答

它似乎是一个浏览器错误。我可以在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)">

来源

2016-06-07 12:01:39 Aziz

在Win10上使用IE11/Edge进行检查，并且它适用于奇数高度/宽度的输入。谢谢。 – dieTrying

1px在IE11 /边缘虚线边框渲染

回答

相关问题