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

Question

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

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

这是铬：

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

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

Answer 1

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

在两种浏览器上， vertical-align: bottom似乎都一样。 如果这是您的预期目标，那可能值得考虑。 我还发现了一篇文章，说明您可以包含此CSS 文件，因此这也可能值得一试。 希望对一些人有所帮助！