CSS边框在视网膜显示屏上被剪裁

Question

根据浏览器窗口的宽度，某些元素（如此存款按钮）的边框会被剪裁。当我调整浏览器的宽度时，如果我逐个像素地移动它，边框会被剪裁，然后在每个像素移动时解开，所以可能它与视网膜显示器上的偶数/奇数像素有关，因为有两个真实的像素每个css像素？我有一个15＆＃34;视网膜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

尝试添加box-sizing：border-box; 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;
}