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

Question

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

我正在开发一个其他人开发的系统（该公司的许多以前的开发人员，以及代码中不同的质量级别），用户可以使用各种元素为其存储的数据构建“仪表板”（图像，图形） ，表格，文本输出等），使用WYSIWYG GUI界面。

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

下面的代码，以及一个非常简单的JS小提琴的链接，显示它的执行情况。似乎第二个按钮现在有一个颜色渐变，没有圆角边缘和更明显的边框。我已经删除了功能代码，只需将其留给样式代码。

<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

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

在大按钮中，圆角不是那么明显，但仍然存在且尺寸相同。

两个按钮上的边框相同。

你可能想要一种让按钮看起来一样的方法，而不是你所看到的视错觉，为此，GitHub上有一些库，例如Buttons。

Answer 2

两个按钮之间没有样式差异。边界和边界半径相同。渐变也是相同的，尽管它在第一个按钮上可能看起来更明显，因为它在较短的高度上在两种颜色之间转换。

编辑：看看你的截图，这不是我所看到的。你使用的是什么浏览器？