將CSS邊框剪裁在視網膜顯示屏上

Question

根據瀏覽器窗口的寬度，像這個存款按鈕這樣的元素的邊框會被裁剪掉。當我調整瀏覽器的寬度時，如果我逐個像素地移動它，邊框會被剪裁，然後在每個像素移動時取消剪切，所以也許它與視網膜顯示器上的偶數/奇數像素有關，因爲有兩個實像素每css像素？我有一個15" 視網膜的MacBook Pro爲1680x1050

這裏的SCSS的按鈕：

.make-deposit { 
    background-color: transparent; 
    border: 1px solid $green; 
    color: $green; 
    padding: 6px 14px; 
    margin-right: 5px; 
    font-size: 12px; 
    position: relative; 
    top: -3px; 

    &:hover { 
     background-color: $green; 
     color: $white; 
    } 
} 

Answer 1

剛剛嘗試添加盒大小：邊界盒; CSS規則...

試試這個新代碼：

.make-deposit { 
    background-color: transparent; 
    border: 1px solid $green; 
    box-sizing: border-box; 
    color: $green; 
    padding: 6px 14px; 
    margin-right: 5px; 
    font-size: 12px; 
    position: relative; 
    top: -3px; 
} 
.make-deposit:hover { 
     background-color: $green; 
     color: $white; 
}