程序员经验分享-hwhale

嵌套 CSS 网格布局在 Chrome 和 Firefox 中的不同行为

2023-12-08

我正在尝试使用 CSS 网格布局来模拟一些响应行为，特别是：

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

我的例子https://codepen.io/elgs/pen/goNxeL在 Chrome 中运行良好，但在 Firefox 中似乎不起作用。当您水平调整浏览器大小时，您会发现它。

另一个例子https://codepen.io/elgs/pen/YYoxOq在 Chrome 和 Firefox 中都运行良好。

html,body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
}
.header {
  grid-column: 1/2;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}
.header .title {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}
.footer {
  grid-column: 1/2;
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}
.footer .copyright {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  font-size: 12px;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}
.content {
  grid-column: 1/2;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0;
  background-color: aliceblue;
}
.content .main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-auto-flow: dense;
  justify-self: center;
  width: 100%;
  margin-top: 10px;
  max-width: 1000px;
}
.placeholder {
    height: 100px;
  position: relative;
  border: 1px solid red;
}
<div class="header">
    <div class="title">
        <h2>Header</h2>
    </div>
</div>
<div class="content">
    <div class="main">
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
        <div class="placeholder"></div>
    </div>
</div>
<div class="footer">
    <div class="copyright">
        <span>Footer</span>
    </div>
</div>

我想知道是我做错了什么还是浏览器的错误。

  • 火狐版本：58.0（64位）
  • Chrome版本：版本64.0.3282.119（官方版本）（64位）

This appears是 Firefox 中的一个错误。但我不确定。

这是明确的：

  1. 嵌套网格容器这一事实很重要。

    Your 第二个演示可以在 Chrome 和 Firefox 中使用，但只有一个网格容器。

    The 第一个演示，仅适用于 Chrome，具有嵌套网格容器。如果消除这种嵌套并仅使用一个网格容器，则该布局在两种浏览器中都适用。

    因此，作为一种可能的跨浏览器解决方案，尽量减少网格容器的嵌套。

    在这个修改后的演示中，我已经注释掉了display: grid on the body and .content元素。剩下的唯一网格容器处于打开状态.main，红色框的父项：

    修改后的演示

html,
body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

body {
  /* display: grid; */
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
}

.header {
  grid-column: 1/2;
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.header .title {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}

.footer {
  grid-column: 1/2;
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.footer .copyright {
  grid-column: 1/2;
  grid-row: 1/2;
  align-self: center;
  font-size: 12px;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}

.content {
  grid-column: 1/2;
  grid-row: 2/3;
  /* display: grid; */
  grid-template-columns: 1fr;
  grid-template-rows: 0;
  background-color: aliceblue;
}

.content .main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-auto-flow: dense;
  justify-self: center;
  width: 100%;
  margin-top: 10px;
  max-width: 1000px;
}

.placeholder {
    height: 100px;
  position: relative;
  border: 1px solid red;
}
<div class="header">
  <div class="title">
    <h2>Header</h2>
  </div>
</div>
<div class="content">
  <div class="main">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
</div>
<div class="footer">
  <div class="copyright">
    <span>Footer</span>
  </div>
</div>

  1. 在 Firefox 中，固定值max-width防止盒子缩小以适应较小的屏幕尺寸。

    Firefox 在缩小时遇到问题.main具有像素值的容器max-width。 Chrome 没有。

    我想到的一个典型的解决方案是覆盖min-width: auto网格项目的默认设置。这可以防止项目缩小超过其内容的大小或定义的宽度。

    但是，该解决方案如下所述：防止内容扩展网格项...在这种情况下不起作用。

    （可能是因为网格项中没有内容，也没有定义宽度。唯一定义的宽度是在网格列上，在网格容器上设置。因此，仅适用于网格项的解决方案可能甚至不适用.)

    作为一种可能的解决方法，如果您必须保留嵌套容器，则不要使用固定值max-width，使用百分比值。这可能对你有用。

    修改后的代码笔

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
  height: 100vh;
  margin: 0;
}

.header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.content {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-rows: 0; */
  align-content: start;  /* new */
  background-color: aliceblue;
}

.content .main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 100px;  /* new */
  grid-gap: 10px;
  grid-auto-flow: dense;
  justify-self: center;
  width: 100%;
  margin-top: 10px;
  /* max-width: 1000px; */
  max-width: 75%;  /* new */
}

.placeholder {
  border: 1px solid red;
}

.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: #57324f;
}

.header .title,
.footer .copyright {
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 1000px;
  color: aliceblue;
}

.footer .copyright {
  font-size: 12px;
}
<div class="header">
  <div class="title">
    <h2>Header</h2>
  </div>
</div>
<div class="content">
  <div class="main">
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
  </div>
</div>
<div class="footer">
  <div class="copyright">
    <span>Footer</span>
  </div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

Googlechrome

firefox

cssgrid

嵌套 CSS 网格布局在 Chrome 和 Firefox 中的不同行为 的相关文章

随机推荐

  • 重定向子进程的输出

    有多种方法可以重定向子进程的输出 using freopen 3 using dup 3 using popen 3 如果需要的话 应该选择什么是执行子进程并将其输出保存在给定文件中 非常类似于ls gt files txt works s

  • 在多页中获取 Activecontrol

    我正在尝试获取该名称Listbox我刚刚选择的 ListBox1 Caveat ListBox1位于Multipage1 在第一个选项卡上 Private Sub ListBox1 Click Dim m As String m Me Ac

  • 在 Ubuntu 14.04 上的 Python 2.6 上安装 M2Crypto 0.20.1

    我需要在 Ubuntu 14 04 上从 Python 2 6 的源代码编译并安装 M2Crypto 0 20 1 我现在无法迁移到 Python2 7 但我们正在计划这样做 我安装了Python2 6https launchpad net

  • 使用 Sass 定制引导程序；我到底应该在我的 scss 文件中导入 bootstrap 吗？

    在尝试使用 Sass 自定义引导程序时 我注意到覆盖默认引导程序变量似乎以一种不连贯的方式工作 并且希望有人可以解释到底发生了什么导致这种行为 某些变量似乎只有在导入 bootstrap 之前声明时才会被覆盖 其他变量似乎只有在导入 boo

  • 当密钥未翻译时使用默认语言后备

    我可以使用默认语言 例如英语 作为其他语言的 Localized strings 文件中的未翻译键吗 为此 您可以使用英文单词作为 Localized strings 文件中的键 另一种方法是检查 NSLocalizedString 的结果

  • 如何在悬停子元素时更改父元素的颜色

    我有一个带有社交链接的 div 当悬停任何具有不同颜色的锚点时 我想使背景颜色填充整个 div 具体取决于悬停的链接 目前 背景仅在锚文本下方发生变化 我正在研究使用纯 CSS 为整个父级填充子级背景颜色的方法 social width 4

  • JPA：如何在静态 JPA 元模型中对 NUMBER 列执行 LIKE？

    我确实有一个带有 NUMBER 实际上是 BigDecimal 不要问为什么 列的静态元模型 现在我想对该数字列进行 LIKE 查询 CriteriaBuilder cb cb like entity get Entity numberco

  • 如何链接多个 Promise？

    我不太确定 也许我错过了一些明显的东西 但我不知道如何链接两个承诺 我的基于回调的代码看起来像这样 async series function cb Create the directory if the nodir switch isn

  • 为什么 Erlang 中阶乘不会溢出堆栈？

    module demo export factorial 1 factorial 0 gt 1 factorial N gt N factorial N 1 阶乘不是尾递归 但为什么它不会溢出堆栈 我能够在没有堆栈溢出的情况下获得 100

  • 将未定义的类设为友元，然后再定义它

    交一个不认识的朋友 template

  • 一次性更改多个文件的 EOL

    Notepad 或者甚至使用其他工具 有什么方法可以自动更改行结尾一次性处理多个文件 即转换 Windows EOL 的混合 CRLF 和 UNIX EOL LF 文件全部为 Windows EOL CRLF The Replace对话框可

  • 将 printf 重定向到两个流

    我正在扩展一个现有的 C 项目 将所有信息打印到stdout with printf 我希望将此信息打印到标准输出和日志文件 如果我是原始项目的贡献者 我会替换所有printf使用我的自定义日志函数进行调用 唉 我不是 所以这是我的问题 是

  • SQL 包含问题

    谁可以给我解释一下这个 我有两个查询及其结果如下 query select from tbl where contains name he AND ca 结果集 赫兹租车 海明威的小酒馆 query select from tbl wher

  • Unity 3D/球体中的翻转法线

    我已经为我的游戏编写了这段代码 我想要的是统一翻转纹理上的法线 我有一个模型和一个纹理 希望纹理位于球体模型内部而不是外部 我想通过在翻转纹理顶部的球体内部的图像周围移动相机来创建 360 度全景效果 现在 当我第一次按下播放按钮时 它运行

  • PHP domDocument 删除子节点的子节点

    如何删除子节点的父节点 但保留所有子节点 XML 文件是这样的

  • 插入一行并避免竞争条件 (PHP/MySQL)

    我正在开发一款多人游戏 该游戏有一个类似大厅的区域 玩家可以选择要进入的 区域 大厅网关由 PHP 提供支持 而实际的游戏玩法则由一台或多台 Java 服务器处理 数据存储是MySQL 幸福之路 玩家选择一个区域并告诉大厅他想进入 大厅检查

  • 如何使用 PowerShell 导出特定的 Excel 列？

    我有一个包含多列的 Excel 我想将一些特定列导出到 xlsx文件 但它导出 Excel 的前 3 列 而不是具有特定标题的列 Host CPU usage Memory usage SourceFileDirectory C TEMP

  • 使用方法为案例类生成伴随对象（字段 = 方法）

    使用 scala macros 为案例类生成伴随对象 我尝试过的一些代码示例 它有效 我可以获取元组列表 名称 gt 类型 但如何在同一范围内生成对象 import c universe val tpe weakTypeOf T val f

  • 从 R 中的函数写入全局环境

    我是 R 新手 在理解如何处理本地和全局环境方面遇到一些困难 我检查了Post关于局部和全局变量 但无法弄清楚 例如 如果我想使用一个函数绘制几张图并像这样保存它们 PlottingFunction lt function type typ

  • 嵌套 CSS 网格布局在 Chrome 和 Firefox 中的不同行为

    我正在尝试使用 CSS 网格布局来模拟一些响应行为 特别是 grid template columns repeat auto fill minmax 250px 1fr 我的例子https codepen io elgs pen goNx

热门标签