Why is this button aligned differently in Firefox?
Question
Given this HTML page :
<html>
<body>before<button style="height: 100px"></button>after</body>
</html>
The page layout is very different in Chrome and Firefox. Here's Firefox:
Here's Chrome:
In Chrome, the button seems to follow vertical-align: baseline . But in Firefox, it seems to follow vertical-align: middle , or something like that.
What is causing this layout difference? And which browser is in the right, regarding CSS specs?
1 answers
solution1
0 2021-10-12 16:55:52
From my understanding, every browser handles the predefined HTML styles in a different way. There's not really a "correct" way for browsers to go about these things, as it's technically up to them to decide how they would like to define the styles.
On both browsers, it seemed that vertical-align: bottom worked the same. If that was your intended goal that might be worth considering. I also found a post stating that you could include this CSS file, so that also might be worth a try. Hopefully, that helps some!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.