为啥这个按钮在 Firefox 中的对齐方式不同？
Posted
技术标签:
【中文标题】为啥这个按钮在 Firefox 中的对齐方式不同？【英文标题】：Why is this button aligned differently in Firefox?为什么这个按钮在 Firefox 中的对齐方式不同？ 【发布时间】：2021-12-01 04:56:15 【问题描述】：给定this html page：
<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 文件，所以这也值得一试。希望对一些人有所帮助！
【讨论】：
以上是关于为啥这个按钮在 Firefox 中的对齐方式不同？的主要内容，如果未能解决你的问题，请参考以下文章
为啥使用 :before 高度时，WebKit 上的对齐标记列表不同？
为啥 Firefox 对待 Helvetica 和 Chrome 的方式不同？