使用CSS Grid制作相册后当前页footer不显示，其他页正常，如何排查？

错误定位&修复方案 #

核心错误 #

你所有相册条目的lightbox<a>标签都未闭合，导致浏览器DOM结构解析错乱，将后续的footer节点判定为未闭合的lightbox元素的子节点，而lightbox默认属性为display: none，所以footer直接被连带隐藏，其他页面没有这段lightbox代码所以footer可以正常显示。 #

其他关联错误点 #

• .grid-container设置了z-index: -999，会让整个相册容器层级低于页面普通元素，可能和footer发生重叠遮挡
• footer内部有多余的</div>闭合标签，无对应的起始<div>，进一步干扰HTML结构解析
• 通配符*里写入了仅flex/grid容器可用的align-items: center，以及全局的margin: 0 auto，会打乱所有元素的默认布局逻辑

具体修复步骤 #

1. 给每个相册条目的lightbox标签补闭合标签</a>，修正后单条相册条目结构如下：

<div>
  <a href="#p1">
    <img class="sadlife" src="photographie/photo1.jpg">
  </a>
  <a href="#" class="lightbox" id="p1">
    <span style="background-image: url('photographie/photo1.jpg')"></span>
  </a> <!-- 补充这个闭合标签 -->
</div>

2. 删除.grid-container的z-index: -999属性
3. 清理footer内多余的</div>标签，修正后footer结构如下：

<footer class="graphfooter" >
  <figure>
    <img src="biographie/salaheddinelaouina-1.png" alt="S.LAOUINA" style="width:15%">
    <figcaption><span>S.LAOUINA</span></figcaption>
    <p>SALAH EDDINE LAOUINA ARTISTE PEINTRE ET PHOTOGRAPHE MAROCAIN</p>
    <p>Copyright 2020 © LAOUINA</p>
  </figure> 
</footer>

4. （可选优化）删除通配符*内的align-items: center、margin-left: auto、margin-right: auto属性，需要居中的元素单独设置对应样式即可

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