css - 缩放时保持按钮文本外观

Question

编辑：原来这是在 macOS catalina 中修复的。一路顺风！

当用户放大或缩小时，如何保持按钮的外观？按钮的文本和边缘之间的间距需要保持一致。

这个问题的jsfiddle

在这里画的小提琴上工作：http: //jsfiddle.net/DevinRhode2/B4Usb/5/

如果您将浏览器缩放设置为 100% 并zoom: 1.1;从小提琴中移除，您将看到带有完全包含且居中文本的按钮 - 这种外观就是目标。

通过必要的修改，为原生 mac 样式按钮重新创建 css 可能更容易。

解决这个问题，或者重新创建相同的 OS X 样式并不容易，所以我开始了赏金。

score 1 · Accepted Answer

我在 chromium、firefox 和 IE 上进行了检查，一切都缩放得恰到好处，并且在按钮边界之外看不到任何文本。http://i.imgur.com/q3mZ7.png

score 0 · Accepted Answer

在 Chrome 上使用 OSX 确实存在问题，这是由于 OSX 对按钮的默认样式规则处理得非常糟糕。

您可以通过向按钮添加自己的背景样式来修复它：

#fixed {
    background: #eee;
    border: 0;
}

我也删除了边框，因为样式按钮的默认边框很丑。

2 回答 2