邊框不到1個像素，這是怎麼回事？

Question

我有一個輸入框，我<input class='cv-input cv-dashboard-input'>頁面上，下列規則定義：

input.cv-dashboard-input { 
    font-family: Roboto; 
    font-weight: 300; 
    color: #004d6f; 
    border: 1px solid #adadad; 
    border-radius: 0px; 
    font-size: 14px; 
    transition: all 0.3s; 
    margin: 0; 
    box-sizing: border-box; 
} 

input.cv-input { 
    height: 42px; 
    width: 100%; 
    padding: 5px; 
    font-family: Roboto; 
    font-weight: 300; 
} 

當我檢查在Firefox此元素，並檢查其計算的尺寸，它指出，我的邊框寬度爲0.583333 PX。我認爲最小渲染大小是1像素，那麼這是怎麼發生的呢？

我使用Firefox 54.0.1（32位）

Answer 1

它確實有可能使用CSS時呈現0.5px。這個問題的答案很簡單，就是CSS中的px並不總是轉換爲計算屬性上的一個像素，因爲它可能受屏幕密度的影響。你可以在這裏閱讀更多關於它的信息：https://www.w3.org/TR/CSS21/syndata.html#length-units

我想提一下，我使用的是高分辨率的屏幕，可以解釋爲什麼我的計算屬性非常準確。

頂部有0.5像素的邊框頂部寬度。