html - 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

只需尝试添加 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;
}