浏览器问题

Question

代码：

<!DOCTYPE html>
<html>
<head>
  <title>Foo</title>
  <style>
  button {
    min-height: 32px;
  }
  </style>
</head>
<body>
  <button>Hit Me</button>
</body>
</html>

在Chrome 72中，开发人员工具显示该按钮的高度仅为18px。为什么？

新代码：

<!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？

Answer 1

浏览器问题

首先，我对here进行了小提琴操作，您可以在其中尝试使用其他功能/浏览器。

button {
    height: 32px;
    min-height: 32px;
  }

这似乎可行。

只有你吗？

不，正如@Michael_B所说的here一样，这似乎是“浏览器”，不仅对于min-height，而且对于height以及更多。

因此，首先您要拥有 W3C标准，这是针对浏览器制造商的一套准则。然后，您便拥有了浏览器制造商，他们可以自由地做他们想做的任何事情。

如果您还尝试使用Safari浏览器，则该浏览器将保留在18px上，而不是Firefox。

我不完全知道为什么它会工作，例如设置background却找不到，但是我认为，使用height: 32px; //same as min-height是解决此问题的“更干净的方式”。 / p>

<!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;
}

否则，请告诉您您要实现的具体情况。

希望有帮助。

按钮的高度不符合Chrome中的最小高度

1 个答案:

浏览器问题

只有你吗？