我的项目使用20行20列的css网格布局(每个单元格占屏幕的5%)。其中一个页面的文本行居中于电子邮件和密码输入框上方,并且输入框也居中。整个区域包含css网格单元格8-14和网格行6-19。
我的问题是,如果我打开Firefox书签,书签弹出按钮会导致电子邮件和密码框上方的行向右移动,而不是在电子邮件和密码框上方居中—换句话说,它没有响应。(我使用的是firefox 64,但在早期的ff版本中也会发生同样的情况)。
相关代码:
.mktg_text {
font-family: CamphorW01-Thin, sans-serif;
font-size: 13pt;
color: rgb(175, 222, 162);
line-height: 1.5;
}
.EMail_Pwd {
font-family: CamphorW01-Thin, sans-serif;
font-size: 14pt;
}
<div class="mktg_text" style="padding-left: 5%">Thirty three characters of text go h<br></div>
<div class="mktg_text" style="padding-left: 0%; color: rgb(175,222,162);">Forty-one characters of text go here Forty</div>
<div class="mktg_text" style="padding-left: 8%"><span style="color: rgb(175,222,162);">Thirty characters of text go h</span></div>
<div class="mktg_text" style="padding-left: 16.5%">Sixteen characte</div><br><br><br><br>
<form name='myform' id='myform'>
<div class="EMail_Pwd">
<input type="text" class="signup_join" autofocus placeholder="Your email address" id="email_field" name="email_field" style="width:55%;" required>
</div>
<div class="EMail_Pwd">
<input type="password" onfocus="OnFocusFn(1)" placeholder="Your password 8 characters minimum" class="signup_join" minlength="8" id="passwd" name="passwd" style="width:55%;" required></div>
</form>
<button class="btn_joinnow" id="btn_joinnow" style="margin-left: 12%; color:rgb(255,255,255)" onfocus="OnFocusFn(2)" onclick="ProcessJoinForm(1)">Join Seventy Now </button>
<br><br><br>
<div class="agree_02" style="padding-left: 6%;">By joining you agree to our</div>
<div class="agree_03"><a href="#" class="button_joinform3" style="text-decoration: none;" onclick="ShowTermsOfSvc()">Terms of Use</a></div><br>
<div class="agree_02" style="padding-left: 9%">Already joined? Please </div>
<div class="agree_03"><a href="#" class="button_joinform3" style="text-decoration: none;" onclick="ShowForm(3)">Sign In Here</a></div><br><br>
<br><br><br><br>
<script type="text/javascript">
document.myform.email_field.focus();
</script>
<script type="text/javascript">
function OnFocusFn(call) {
if (call == 1) {
document.getElementById("passwd").style.borderColor = "rgb(175,222,162)";
}
if (call == 2) {
document.getElementById("btn_joinnow").style.borderColor = "rgb (175,222,162)";
}
}
</script>
<script type="text/javascript">
function ShowTermsOfSvc() {
var elemX = document.getElementById("TOU");
elemX.style.color = "rgb(175,222,162)";
var elemY = document.getElementById("button_01_Hidden");
elemY.style.color = "rgb(100,100,100)";
console.log(elemY);
ShowLeftLinks();
}
</script>
我注意到当我打开firefox书签弹出面板时,电子邮件和密码框会收缩,所以这可能是书签面板打开时上面的文本没有正确对齐的原因。
所以我的问题是:为什么电子邮件和密码框上方的文本行不能正确居中?电子邮件和密码框是否会影响响应?Firefox中的书签弹出面板是否会导致响应式设计出现此问题?是因为文本居中吗?
其他页面都没有一个firefox书签弹出的响应问题,但这是唯一一个所有内容都使用填充以css网格区域为中心的页面。
