Regarding the differences in the styles displayed in different browsers - html

Question

I found that the line I drew is displayed differently in the two browsers, which is very strange. Does it seem that its margin has changed?
Here is displayed in Google Chrome:
And here is displayed in Firefox:
Here is my css code for drawing the line:
.line {
display: block;
width: 100%;
border-bottom: 1px solid gray;
margin: 30px 0;
}
.inputContainer {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin-top: -20px;
}
.inputContainer #loginForm {
margin-top: -250px;
}
.inputContainer h2 {
font-size: 15px;
text-align: center;
margin: 20px 0;
margin-top: 0;
}
.inputContainer p {
font-size: 16px;
margin: 15px 0;
}
Here is my section html code:
<div class="buttonList">
<div class="buttonListE"><button id="ad_A">Cloud Music Free</button></div>
<div class="buttonListE"><button id="ad_B">The Best Music Webapp</button></div>
<div class="buttonListE"><button id="ad_C">Enjoy this moment</button></div>
</div>
<div class="inputContainer">
<form action="register.php" id="loginForm" method="POST">
<div class="line"></div>
<h2>To continue, log in to Cloud Music</h2>
<p>
<label for="loginUsername">Email address or username</label>
<input type="text" id="loginUsername" name="loginUsername" placeholder="Email address or username." value="<?php keepValueLastTime('loginUsername'); ?>" required>
<?php echo $account->getError(Constants::$loginFailedUsername); ?>
<?php echo $account->getError(Constants::$loginFailedEmail); ?>
</p>
<p>
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" name="loginPassword" placeholder="Password." required>
</p>
<button class="greenButton" type="submit" name="loginButton">LOG IN</button>
<div></div>
<div class="hasAccountText">
<div class="line"></div>
<span>Don't have an account?</span>
<button class="greyButton" id="hideLogin" type="button">SIGN UP HERE</button>
</div>
</form>

Answer 1

Firefox appears to have issues with negative margin in some instances. I noticed that you gave the form margin-top: -250px when putting it in a flex-container that had align-items: center which seems counter-intuitive. Try using this method:
.line {
display: block;
width: 100%;
border-bottom: 1px solid gray;
margin: 30px 0;
}
.inputContainer {
display: flex;
justify-content: center;
min-height: 100vh;
margin-top: -20px;
}
.inputContainer h2 {
font-size: 15px;
text-align: center;
margin: 20px 0;
margin-top: 0;
}
.inputContainer p {
font-size: 16px;
margin: 15px 0;
}
<div class="buttonList">
<div class="buttonListE"><button id="ad_A">Cloud Music Free</button></div>
<div class="buttonListE"><button id="ad_B">The Best Music Webapp</button></div>
<div class="buttonListE"><button id="ad_C">Enjoy this moment</button></div>
</div>
<div class="inputContainer">
<form action="register.php" id="loginForm" method="POST">
<div class="line"></div>
<h2>To continue, log in to Cloud Music</h2>
<p>
<label for="loginUsername">Email address or username</label>
<input type="text" id="loginUsername" name="loginUsername" placeholder="Email address or username." value="<?php keepValueLastTime('loginUsername'); ?>" required>
</p>
<p>
<label for="loginPassword">Password</label>
<input type="password" id="loginPassword" name="loginPassword" placeholder="Password." required>
</p>
<button class="greenButton" type="submit" name="loginButton">LOG IN</button>
<div></div>
<div class="hasAccountText">
<div class="line"></div>
<span>Don't have an account?</span>
<button class="greyButton" id="hideLogin" type="button">SIGN UP HERE</button>
</div>
</form>
An alternative could be this instead of margin-top: -250px
position: relative;
top: -250px;
This top property seems to work for some as well so be sure to give this a try.