Chrome中的邊框寬度不一致

Question

使用1px寬邊框渲染邊框時，邊框寬度不一致。這顯然是由於瀏覽器縮放（我在2160 x 1440顯示器上）。雖然我意識到「一個像素不是像素」問題（由於縮放），但我仍然認爲邊框的寬度在盒子的所有邊上應該是相同的，不是嗎？

Chrome和IE都會出現此問題，但Firefox和Opera都可以完美處理它。正如你所看到的，左側和右側的邊框比頂部和右側的邊框寬一些。

這裏是我的代碼：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
}

<div></div>

是否有一個很好的解決這個？

我會補充說我在Surface Pro 3上。它可能與Windows中的縮放有關。

Answer 1

這將解決你的問題：

*, 
*:before, 
*:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}