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

Question

根据浏览器窗口的宽度，某些元素(如存款按钮)的边框会被剪掉。当我调整浏览器的宽度时，如果我逐像素移动它，边框会被剪裁然后随着每个像素的移动而取消剪裁，所以它可能与视网膜显示器上的偶数/奇数像素有关，因为有两个真实像素每个 css 像素？我有一台分辨率为 1680x1050 的 15"Retina macbook pro。

这是按钮的 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;
}