1px在IE11 /邊緣虛線邊框渲染

注意到在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 /邊緣虛線邊框渲染

回答

相關問題