為什么這個按鈕在 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 文件，因此這也可能值得一試。 希望對一些人有所幫助！