CSS Grid布局在Chrome正常显示，Firefox中异常，求技术解决方案

你的Grid布局在Chrome表现正常但Firefox出问题，核心原因是Firefox对百分比高度的继承逻辑比Chrome更严格，我帮你梳理了问题点和修复方案：

核心问题分析 #

Firefox要求子元素的百分比高度必须有明确的父元素高度作为参考，否则不会生效。你的.container设置了height:100%，但它的父元素html和body没有设置完整高度，导致Firefox无法正确计算Grid容器的高度，进而影响嵌套Grid的比例分配。另外你提供的HTML末尾还有语法错误，也会导致布局异常。

修复后的完整代码 #

CSS部分 #

:root { 
  --text-color:#fff; 
} 
* { 
  padding: 0; 
  margin: 0; 
  border: 0; 
  box-sizing: border-box; 
} 
/* 新增：给html和body设置100%高度，确保.container能继承到有效高度 */
html, body {
  height: 100%;
  margin: 0;
}
body { 
  margin: 10px; 
  background: #ddd; 
  font-family: 'Noto Serif', serif; 
} 
.container { 
  margin: 0 auto; 
  width: 100%; 
  height: calc(100% - 20px); /* 减去body的上下margin，避免出现滚动条 */
  background: goldenrod; 
  display: grid; 
  grid-template-columns: 3fr 1fr; 
  gap: 10px; /* 用标准的gap代替grid-gap，兼容性更好 */
} 
.rightcontainer { 
  background: blue; 
  padding: 25px; 
} 
.rightcontainer .links { 
  margin-bottom: 10px; 
  font-size: 1.2em; 
} 
.links a { 
  text-decoration: none; 
  color: var(--text-color); 
} 
.leftcontainer { 
  background: green; 
  display: grid; 
  grid-template-rows: 1fr 1fr; 
  gap: 10px; 
  /* 新增：确保嵌套Grid容器占满父元素的可用高度 */
  height: 100%;
} 
.leftcontainer__feature-articles { 
  background: yellow; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
} 
.leftcontainer__feature-article1 { 
  background: #000; 
  color: #fff; 
} 
.leftcontainer__feature-article2 { 
  background: #555; 
  color: #fff; 
} 
.leftcontainer__recent-articles { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
} 
.leftcontainer__recent-articles > div{ 
  padding: 5px; 
  background: #ccc; 
  display: grid; 
  grid-template-columns: 150px 1fr; 
} 
.leftcontainer__recent-articles > div img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
} 
.recent-contentholder { 
  padding: 10px; 
} 
.recent-time-added { 
  display: inline-block; 
  font-style: italic; 
  margin-bottom: 5px; 
} 
.leftcontainer__feature-articles > div { 
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr; 
} 
.leftcontainer__feature-article1 img, .leftcontainer__feature-article2 img { 
  width: 100%; 
  object-fit: cover; 
  height: 100%; 
  grid-column: 1 / -1; 
  grid-row: 1 / -1; 
} 
.leftcontainer__feature-article1 div, .leftcontainer__feature-article2 div { 
  width: 100%; 
  height: 100%; 
  grid-column: 1 / -1; 
  grid-row: 1 / -1; 
}

HTML部分（修复了末尾语法错误） #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>NewBlog</title> 
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700|Roboto:100,300,400,500,700,900" rel="stylesheet"> 
  <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
  <div class="container"> 
    <div class="leftcontainer"> 
      <div class="leftcontainer__feature-articles"> 
        <div class="leftcontainer__feature-article1"> 
          <img src="//source.unsplash.com/random/500x500?v=1" alt=""> 
          <div class="feature-contentholder"> 
            <h2 class="feature-title">Title1</h2> 
            <small class="feature-time-added"> Tuesday 30 23:58 </small> 
            <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt non! </p> 
          </div> 
        </div> 
        <div class="leftcontainer__feature-article2"> 
          <img src="//source.unsplash.com/random/500x500?v=1" alt=""> 
          <div class="feature-contentholder"> 
            <h2 class="feature-title">Title1</h2> 
            <small class="feature-time-added"> Tuesday 30 23:58 </small> 
            <p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt non! </p> 
          </div> 
        </div> 
      </div> 
      <div class="leftcontainer__recent-articles"> 
        <div class="leftcontainer__recent-article1"> 
          <img src="//source.unsplash.com/random/300x300?v=1" alt=""> 
          <div class="recent-contentholder"> 
            <h2 class="recent-title">Title1</h2> 
            <small class="recent-time-added"> Tuesday 30 23:58 </small> 
            <p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt non! </p> 
          </div> 
        </div> 
        <div class="leftcontainer__recent-article2"> 
          <img src="//source.unsplash.com/random/300x300?v=2" alt=""> 
          <div class="recent-contentholder"> 
            <h2 class="recent-title">Title2</h2> 
            <small class="recent-time-added"> Tuesday 30 23:58 </small> 
            <p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt non! </p> 
          </div> 
        </div> 
        <div class="leftcontainer__recent-article3"> 
          <img src="//source.unsplash.com/random/300x300?v=3" alt=""> 
          <div class="recent-contentholder"> 
            <h2 class="recent-title">Title3</h2> 
            <small class="recent-time-added"> Tuesday 30 23:58 </small> 
            <p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt non! </p> 
          </div> 
        </div> 
        <div class="leftcontainer__recent-article4"> 
          <img src="//source.unsplash.com/random/300x300?v=4" alt=""> 
          <div class="recent-contentholder"> 
            <h2 class="recent-title">Title4</h2> 
            <small class="recent-time-added"> Tuesday 30 23:58 </small> 
            <p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt non! </p> 
          </div> 
        </div> 
      </div> 
    </div> 
    <div class="rightcontainer"> 
      <div class="links"><a href="#">Link1</a></div> 
      <div class="links"><a href="#">Link2</a></div> 
      <div class="links"><a href="#">Link3</a></div> 
    </div> 
  </div> 
</body> 
</html>

关键修改点说明 #

• 给html和body设置height:100%：让.container的百分比高度有明确的父元素参考，Firefox才能正确计算容器高度。
• 调整.container高度为calc(100% - 20px)：抵消body的上下margin，避免页面出现滚动条。
• 给.leftcontainer添加height:100%：确保嵌套Grid容器占满父元素空间，让grid-template-rows:1fr 1fr能按比例分配高度。
• 替换grid-gap为标准属性gap：虽然旧属性兼容，但gap是当前CSS Grid的标准写法，适配性更好。
• 修复HTML末尾的不完整标签：补全了截断的<div cla标签，避免DOM结构异常。

这样修改后，你的Grid布局应该能在Chrome和Firefox中表现一致了。

内容的提问来源于stack exchange，提问作者Naveen