html - 为什么这个按钮在 Firefox 中的对齐方式不同？
问题描述
鉴于此 HTML 页面：
<html>
<body>before<button style="height: 100px"></button>after</body>
</html>
Chrome 和 Firefox 中的页面布局非常不同。这是火狐：
这是铬：
在 Chrome 中，按钮似乎跟随vertical-align: baseline。但在 Firefox 中，它似乎遵循vertical-align: middle，或类似的东西。
是什么导致了这种布局差异？关于 CSS 规范，哪个浏览器是正确的？
解决方案
据我了解，每个浏览器都以不同的方式处理预定义的 HTML 样式。浏览器并没有真正的“正确”方式来处理这些事情，因为从技术上讲，它们要决定如何定义样式。
在这两种浏览器上，似乎都vertical-align: bottom一样。如果那是您的预期目标，那可能值得考虑。我还发现一篇文章说你可以包含这个CSS 文件，所以这也值得一试。希望这对一些人有所帮助！