关于不同浏览器显示样式的差异

Question

我发现我画的线在两个浏览器中显示不一样，很奇怪。它的保证金好像变了？

这里显示在GoogleChrome：

在 Firefox 中显示如下：

这是我的 css 画线代码：

.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;
}

这是我的部分 html 代码：

<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 在某些情况下似乎存在负面 margin 问题。我注意到您在将 margin-top: -250px 放入具有 align-items: center 的弹性容器中时给出了形式，这似乎违反直觉。试试这个方法：

.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>

一个替代方案可以是这个而不是 margin-top: -250px

position: relative;
top: -250px;

这个 top 属性似乎也适用于某些人，所以一定要试一试。

关于不同浏览器显示样式的差异

Regarding the differences in the styles displayed in different browsers

html

css

web

cross-browser

display