如何在iPhone Safari上修复此CSS显示？

Question

适用于Chrome桌面

但不是Safari iOS

这是CSS

.button {
    border: 1px outset $color3;
    background: $color1;
    color: $color4;
    font-size: 80%; // A little smaller because it's in uppercase
    text-transform: uppercase;
    display: inline;
    margin-left: 5px;
    margin-right: 5px;
}

我尝试了font-size: smaller，0.8em等，但它没有帮助。 50％或0.5em在iPhone上看起来不错，但在桌面上太小了。 text-transform并不重要。 padding: 1px;没有帮助。

Answer 1

将显示更改为内联块，并将填充添加到顶部