Question

编辑：我在下面发布了这个问题的答案。

我的项目使用20行x 20列的CSS网格布局（每个单元格屏幕的5％）。其中一页的文本行在电子邮件和密码输入框上方居中，输入框也居中。整个区域包含css网格单元8-14和网格行6-19，居中通过padding-left完成。

我的问题是，如果我打开Firefox书签，则书签弹出面板会使电子邮件和密码框上方的行移到右侧，而不是电子邮件和密码框上方的居中位置-换句话说，它没有响应书签面板显示出来。（我使用的是Firefox 64，但是在早期的FF版本中也会发生同样的情况。）

相关的html代码：

<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?&nbsp;&nbsp;Please&nbsp;</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网格区域将所有内容居中的页面。

这是一个更大项目的一部分，所以我发布了该示例，因为它现在没有可重现的示例，希望有人能通过所发布的代码知道该问题的答案。我可以提供一个完整的示例，但是这样做会花费一些时间，因此，如果没有人可以回答上面发布的代码，那么我将不得不这样做。谢谢。

Answer 1

与其使用填充来构造列和行，不如考虑使用Flexbox。

您可以像这样创建列和行：

flex-direction: column | column-reverse | row | row-reverse;

它可以快速解决布局问题，几乎没有复杂性，并且在所有现代浏览器中均受支持。

Here is a complete guide to Flexbox。

Here is the list of browsers that support Flexbox。

Answer 2

这是我解决此问题的方法-我使用了一个flex项目将其置于网格单元的中心。

x = ['t', 't2']
y = [w, w2]
filter(x[0]=y[0], x[1]=y[1])

感谢所有回答。

Firefox书签面板更改了响应式CSS网格设计

2 个答案: