为什么这个按钮在 Firefox 中的对齐方式不同？答案

【问题标题】：Why is this button aligned differently in Firefox?为什么这个按钮在 Firefox 中的对齐方式不同？
【发布时间】：2021-12-01 04:56:15
【问题描述】：

<html>
<body>before<button style="height: 100px"></button>after</body>
</html>

Chrome 和 Firefox 中的页面布局非常不同。这是火狐：

这是 Chrome：

在 Chrome 中，按钮似乎跟随vertical-align: baseline。但在 Firefox 中，它似乎遵循vertical-align: middle，或类似的东西。

是什么导致了这种布局差异？关于 CSS 规范，哪个浏览器是正确的？

【问题讨论】：

两者都遵循基线，但 Firefox 计算基线的方式不同。在按钮内添加一个字母以查看 Firefox 正在考虑这样的基线。 IMO Chrome 在这里是正确的，但按钮总是很奇怪，所以我对这种行为并不感到惊讶
同意 Temani，但即使是 Chrome 的行为似乎也不正确。如果按钮包含单个空块元素，则不足以移动基线，但在 Chrome 中它将其移动到中间，以匹配 Firefox。无论如何，一个没有内容的按钮是一个非常糟糕的主意，你不应该这样做，所以在实践中它几乎没有什么区别。

【解决方案1】：

据我了解，每个浏览器都以不同的方式处理预定义的 HTML 样式。浏览器并没有真正“正确”的方式来处理这些事情，因为从技术上讲，它们要决定如何定义样式。

在两种浏览器上，vertical-align: bottom 的工作方式似乎相同。如果那是您的预期目标，那可能值得考虑。我还发现一个帖子说你可以包含this CSS 文件，所以这也值得一试。希望对一些人有所帮助！

【讨论】：