html - 关于不同浏览器显示样式的差异
问题描述
发现自己画的线在两个浏览器中显示不一样,很奇怪。是不是好像它的margin变了?
这是我画线的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>
解决方案
margin
在某些情况下,Firefox 似乎存在负面问题。我注意到您在将表单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
属性似乎也适用于某些人,所以一定要试一试。
推荐阅读
- python - Access attributes of classA from classB where classB is an attribute of classA
- javascript - 清除 jquery 表单,除了少数字段
- java - 为什么在使用 java 获取时从 DB 中获取错误的时间数据?
- node.js - Nuxt App 的 Vue-CoolLightBox 组件中未显示图像
- angular - 角度测试:tick 无法从其自己的 fakeAsync 区域之外的计时器中提前时间
- angular - 如何通过 jest 提供 @inject 构造函数参数
- python - 将最里面的for循环重写为while语句
- typescript - 打字稿抱怨类型永远不能分配给简单泛型类中的类型 K
- r - 如何用条件减去R中的多列
- javascript - javascript bigint 转换