码：
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
在Chrome 72中，开发人员工具显示该按钮的高度仅为18像素。为什么？
新守则：
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
min-height: 32px;
background: lightgray;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>
现在按钮高度变为32px。
为什么没有背景设置按钮高度不尊重min-height？
首先，我做了一个小提琴正确的here，你可以尝试不同的东西/浏览器。
button {
height: 32px;
min-height: 32px;
}
这似乎有效。
不，正如@Michael_B所说的here，它似乎是一个“浏览器的东西”，不仅与min-height，而且与height等。
首先，你有W3C标准，这是一套针对浏览器制造商的指南。然后你就拥有了浏览器制造商，他们可以随心所欲地做任何事情。
如果您也尝试使用Safari浏览器，它会使用18px，但不能使用Firefox。
我不知道为什么它的作用例如设置一个background而且都找不到它，但在我看来，height: 32px; //same as min-height是一个“更清洁的方式”来完成这个。
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
button {
height: 32px; /*Here you should put the min-height value*/
min-height: 32px;
}
</style>
</head>
<body>
<button>Hit Me</button>
</body>
</html>更新1
如果您希望按钮具有动态高度（比如说100％）到其父级，只需执行以下操作：
div {
height: 10px;
min-height: 32px;
}
button {
height: 100%;
}
如果你看到，因为button是height: 100%;到div（它的父母），将min-height设置为它将完美地工作，你的按钮可以动态地改变它的高度。
你也可以去：
button {
min-height: 32px;
border: 0;
}
否则请告诉您具体案例，了解您想要达到的目标。
希望它有所帮助。