代码之家 › 专栏 › 技术社区 › RTC222

Firefox书签面板改变了响应性css网格设计

css-grid firefox css3 css html

0

RTC222 · 技术社区 · 7 年前

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

我的项目使用20行20列的css网格布局(每个单元格占屏幕的5%)。其中一个页面的电子邮件和密码输入框上方有几行文本居中,输入框也居中。整个区域包含css网格单元8-14和网格行6-19,居中使用左侧填充。

我的问题是,如果我打开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网格区域为中心并使用填充的页面。

这是一个大得多的项目的一部分,所以我发布了这个,因为它现在没有一个可复制的例子,希望有人会知道这个问题的答案与代码发布。我可以提供一个完整的例子,但这将需要一些时间,所以如果没有人可以回答上面的代码,那么我将不得不这样做。谢谢

2 回复 | 直到 7 年前

1

0

Arielle Adams 7 年前

不要使用填充来构造列和行,而是考虑使用FrasBox。

可以这样创建列和行:

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

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

Here is a complete guide to Flexbox .

Here is the list of browsers that support Flexbox .

2

0

RTC222 7 年前

下面是我如何解决这个问题的——我使用了一个flex项来在网格单元中居中。

<div class="center_text_grid flex-item header_upload">Welcome</div>

.center_text_grid {
    display: grid;
    grid-column: 5 / 8;
    grid-row: 6 / 19;
    display: block;
    overflow: auto;
    align-items: center;
    justify-items: center;
}

.flex-item {
  display: flex;
  width: 70%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.header_upload{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 14pt;
    color: rgb(175,222,162);
}

感谢所有回答的人。