dimanche 3 janvier 2021

Regarding the differences in the styles displayed in different browsers

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: enter image description here

And here is displayed in Firefox: enter image description here

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>



Aucun commentaire:

Enregistrer un commentaire