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

概述我正在尝试使用CSS网格布局来模拟一些响应行为,特别是： grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 我的示例https://codepen.io/elgs/pen/goNxeL在Chrome中运行良好,但它似乎在Firefox中不起作用.您可以在水平调整浏览器大小时找到它. 另一个例子https://codepen. 我正在尝试使用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;  @R_502_5095@: 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,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 >    <div >        <h2>header</h2>    </div></div><div >    <div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>    </div></div><div >    <div >        <span>Footer</span>    </div></div>

我想知道我做错了什么,或者是浏览器的错误.

> firefox版本：58.0(64位)
> Chrome版本：64.0.3282.119版(官方版)(64位)

解决方法 这似乎是firefox中的一个错误.但我不确定.

这是明确的：

>嵌套网格容器的事实很重要.

您的second demo在Chrome和firefox中均可使用,只有一个网格容器.

first demo仅适用于Chrome,具有嵌套网格容器.如果您消除了嵌套,并且只使用一个网格容器,则布局适用于两种浏览器.

因此,作为一种可能的跨浏览器解决方案,最小化网格容器的嵌套.

在这个修改过的演示中,我已经注释掉了display：grID on body和.content元素.剩下的唯一网格容器是.main,红色框的父级：

revised demo

HTML,body {  height: 100%;  wIDth: 100%;  margin: 0 auto;  @R_502_5095@: 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,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 >  <div >    <h2>header</h2>  </div></div><div >  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div></div><div >  <div >    <span>Footer</span>  </div></div>

>在firefox中,最大宽度上的固定值可防止盒子缩小以适应更小的屏幕尺寸.

firefox在缩小.main容器时遇到问题,其最大宽度为像素值. Chrome没有.

想到的典型解决方案是覆盖网格项上的最小宽度：自动默认设置.这可以防止项目缩小超过其内容大小或其定义的宽度.

但是,此处描述的解决方案：Prevent content from expanding grid items …在这种情况下不起作用.

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

作为一种可能的解决方法,如果必须保留嵌套容器,则使用百分比值而不是使用max-wIDth的固定值.这可能对你有用.

revised codepen

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,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 >  <div >    <h2>header</h2>  </div></div><div >  <div >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div></div><div >  <div >    <span>Footer</span>  </div></div>

@H_419_75@ 总结

以上是内存溢出为你收集整理的html – Chrome和Firefox中嵌套的CSS网格布局不同的行为全部内容，希望文章能够帮你解决html – Chrome和Firefox中嵌套的CSS网格布局不同的行为所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。