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

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

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