页面间隙消除与无序列表从数字4开始计数的技术求助

页面效果对比 #

• 预期效果（全宽度下）：
  
• 窗口缩小时的实际效果：
  

问题描述 #

1. 间隙问题：给.anecdotes添加Grid布局后，右上角封面图和曲目框之间、专辑描述与.anecdotes之间出现间隙，窗口越小间隙越大。尝试给图片和曲目框设置负margin无效；移除自定义font-family时间隙缩小但无法消除，更换其他字体也存在该问题。
2. 列表计数问题：.tracks-box-2中的无序列表（已设置list-style: decimal）需要从数字4开始计数，使用counter-reset属性未成功，且无法将其改为有序列表。

相关代码 #

CSS

/* positioning */

#spring {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 2fr auto 1.1fr;
  gap: 0.3vh;
}

.album_data {
  grid-row: 1 / span 2;
  margin-right: 1vh;
}


/* cover */

.cover,
.song_list {
  grid-column: 2;
}

.cover img {
  width: 100%;
}

.show_hover,
.cover:hover .show_not_hover {
  display: none;
}

.cover:hover .show_hover {
  display: initial;
}

.show_hover,
.show_not_hover {
  border-radius: 20px 20px 0 0;
}


/* tracks */

.song_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vh;
}

.tracks-box-1 {
  background-color: rgb(13, 88, 13);
  padding: 2vh;
  border-radius: 0 0 0 20px;
  font-size: 1rem;
}

.tracks-box-2 {
  background-color: rgb(13, 88, 13);
  border-radius: 0 0 20px 0;
  padding: 2vh;
  padding-top: 3vh;
  font-size: 1rem;
  /* this list */
}


/* anecdotes */

.anecdotes {
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
  margin-top: 0.8vh;
  margin-bottom: -1vh;
  gap: 0.7vh;
  list-style: none;
  padding: 0;
}

.top_right_90 {
  background-color: rgb(13, 88, 13);
  border-radius: 20px 0 20px 20px;
  padding: 2vh;
  grid-column: 1;
  display: flex;
  align-items: center;
}

.two_wide_bottom_left_90 {
  background-color: rgb(13, 88, 13);
  border-radius: 20px 20px 20px 0;
  padding: 2vh;
  grid-column: 3/4;
  display: flex;
  align-items: center;
}

.brian_bell {
  background-image: url(Images/weezer-green.jpg);
  background-size: cover;
  background-position: 70% 50%;
  border-radius: 0 20px 20px 20px;
  padding: 2vh;
  grid-column: 4/5;
  grid-row: 1;
  font-weight: bold;
  text-shadow: 0 0 0.5vh #003402;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.bottom_right_90 {
  background-color: rgb(13, 88, 13);
  border-radius: 20px 20px 0 20px;
  padding: 2vh;
  grid-column: 5/6;
  grid-row: 1;
  display: flex;
  align-items: center;
}


/* some styling */

.h1 {
  font-family: Piximisa;
  font-weight: bold;
  font-size: 5vw;
  color: rgba(249, 249, 249, 0.7);
  margin: 0;
}

.h2-spring {
  font-family: Louis;
  font-size: 2.4vw;
  color: rgb(76, 148, 66);
  margin: 0;
  margin-bottom: 50px;
}

.musicians {
  margin-bottom: 50px;
}

li :not(h2>*) {
  list-style: none;
}

.tracks {
  list-style: decimal;
  padding-left: 16px;
}

HTML

<article id="spring" class="best">

  <div class="album_data">
    <div>
      <h1 class="h1">SZNZ: Spring</h1>
      <h2 class="h2-spring">Released March 2022</h2>
    </div>
    <div class="musicians">
      <p>Musicians:</p>
      <ul>
        <li>Rivers Cuomo, Lead vocals, backing vocals, lead guitar & writer</li>
        <li>Patrick Wilson, Drums & Writer</li>
        <li>Brian Bell, Backing vocals & lead guitar</li>
        <li>Scott Shriner, Backing vocals & bass</li>
      </ul>
    </div>

    <div class="album_description">
      <p>SZNZ is a musical project by Weezer planned for release throughout 2022. The project is a collection of four short studio records to be released on the first day of each seasonal solstice, with each having its own motif, aesthetic themes, and production
        style based on the corresponding season. SZNZ: Spring is the first (of four) in the SZNZ series of EPs by Weezer.
      </p>
    </div>

  </div>

  <div class="cover">
    <img class="show_hover" src="images/spring.jpg">
    <img class="show_not_hover" src="images/spring-2.jpg">
  </div>

  <div class="song_list">
    <div class="tracks-box-1">
      <h2>Tracks</h2>
      <ul class="tracks">
        <li>Opening Night</li>
        <li>Angels on Vacation</li>
        <li>A Little Bit of Love</li>
      </ul>
    </div>
    <div class="tracks-box-2">
      <h2></h2>
      <ul class="tracks">
        <li>The Garden of Eden</li>
        <li>The Sound of Drums</li>
        <li>All This Love</li>
        <li>Wild at heart</li>
      </ul>
    </div>
  </div>

  <ul class="anecdotes">
    <li class="top_right_90">The album was produced by Weezer's frequent collaborators Jake Sinclair and Suzy Shinn, as well as new collaborator Ethan Gruska.</li>
    <li class="empty"></li>
    <li class="two_wide_bottom_left_90">Cuomo stated that he wanted the Spring album to feature a "Happy, chill, stress-free" theme, later expressing a desire for an "acoustic, breezy" song in a similar vein to "Island in the Sun".</li>
    <li class="empty tablet_empty"></li>
    <li class="empty phone_empty"></li>
    <li class="brian_bell">Brian Bell, lead guitarist</li>
    <li class="bottom_right_90">SZNZ was officially announced via Weezer's social media pages on March 11 2022. </li>
  </ul>
</article>

解决方案 #

1. 间隙问题修复

问题核心是#spring的网格行高使用fr单位，该单位会根据容器剩余空间分配高度，窗口缩小时文字换行导致内容高度变化，加上固定像素margin的冲突，就会产生间隙。修改方案：

#spring {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  /* 改用auto让行高由内容自动决定 */
  grid-template-rows: auto auto auto;
  gap: 0.3vh;
}

/* 把固定像素margin改成相对单位，适配窗口变化 */
.h2-spring {
  margin-bottom: 3vh;
}
.musicians {
  margin-bottom: 3vh;
}

2. 列表计数问题修复

方案一：用CSS计数器实现（保留无序列表）

/* 初始化计数器，第一个列表累计计数 */
.tracks-box-1 .tracks {
  counter-reset: track-counter;
}
.tracks-box-1 .tracks li {
  counter-increment: track-counter;
}

/* 第二个列表从3开始计数，生成4开头的序号 */
.tracks-box-2 .tracks {
  counter-reset: track-counter 3;
}
.tracks-box-2 .tracks li {
  counter-increment: track-counter;
  list-style: none;
}
.tracks-box-2 .tracks li::before {
  content: counter(track-counter) ".";
  margin-right: 8px;
}

方案二：改为有序列表（直接生效）

把.tracks-box-2中的<ul>替换为<ol>，并添加start="4"属性：

<div class="tracks-box-2">
  <h2></h2>
  <ol class="tracks" start="4">
    <li>The Garden of Eden</li>
    <li>The Sound of Drums</li>
    <li>All This Love</li>
    <li>Wild at heart</li>
  </ol>
</div>

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