html - 改变按钮的高度会显着改变按钮样式

Question

我有一个非常愚蠢的问题，希望得到一些帮助。

我正在开发其他人开发的系统(整个公司有很多以前的开发人员，并且代码质量水平各不相同)，用户可以在其中使用各种元素(图像、图表)为他们存储的数据构建“仪表板” 、表格、文本输出等)，使用所见即所得的 GUI 界面。

用户可以添加到仪表板的元素之一是按钮。用户可以修改按钮元素的设置，包括它的宽度和高度。更改宽度不是问题，但更改高度似乎会显着改变按钮的外观。一旦按钮的高度设置为明确的像素高度，许多其他样式选项似乎就会发生变化。

这是下面的代码，以及指向一个非常简单的 JS fiddle 的链接，显示了它的执行情况。似乎第二个按钮现在有一个颜色渐变，没有圆边，并且边框更清晰。我已经剥离了功能代码，只将其留给样式代码。

<button style="width: 186px; font-family: Arial; font-size: 10pt; color: Black;">
    Perform Action
</button>

<button style="width: 186px; height: 124px; font-family: Arial; font-size: 10pt; color: Black;">
    Perform Action
</button>

http://jsfiddle.net/r3sct7b5/1/

我需要回答的是我应该如何使这些按钮保持一致？我需要在css下定义按钮的所有方面吗？仅仅改变按钮的高度就应该如此显着地改变按钮的其他特性吗？

编辑 为了清楚起见 - 这是我在我的应用程序和 JSFiddle 中看到的。左边的按钮是未修改高度的按钮，右边的按钮是修改高度的按钮。

Answer 1

在我的屏幕上，它仍然具有相同的样式，但在小按钮中，您无法轻易看到渐变。

在大按钮中，圆 Angular 没有那么明显，但仍然存在并且大小相同。

两个按钮的边框相同。

您可能想要一种方法让按钮看起来一样，并且没有您所看到的视觉错觉，为此 GitHub 上有一些库，例如 Buttons .