height:100%的子元素受父元素padding影响的异常问题排查

HTML结构 #

<body>
  <!-- ... 若干嵌套div ... -->
  <div class="root">
    <div>
      <a>
        <span></span>
      </a>
    </div>
  </div>
  <!-- ... 其他嵌套div ... -->
</body>

预设样式规则 #

• body：white-space: nowrap、font-size: 0px
• 外层.root：display: grid，固定宽高，行列尺寸设为min-content
• 内层div：display: block，未设置明确高度
• a：display: inline-block，带padding但无明确高度，显式设置line-height: 0、font-size: 0
• span：display: inline-block，height: 100%，无内容

异常现象 #

测试场景中，span高度始终为0，不受a的padding影响，符合预期。但在实际网站中出现两个异常：

1. span高度会随a的padding值变化；给a设置非auto的固定高度后，该异常消失
2. 内层div未计算a/span的高度，导致自身高度异常

已排查情况 #

• 修改box-sizing属性对异常无影响
• 唯一差异是该结构嵌套在网站的其他元素内，但初步排查祖先元素未发现明显问题
• 浏览器版本：Microsoft Edge 103.0.1264.62
• 已对比测试场景与网站中各元素的表现差异

排查建议 #

1. 深挖祖先元素样式

   • 检查所有祖先元素的display属性，尤其是grid/flex布局，这类布局可能改变子元素的高度计算逻辑
   • 核对祖先元素的height/min-height设置，是否存在意外的高度约束或继承
   • 查看祖先元素的overflow属性，是否影响内部元素的高度渲染

2. 对比计算样式差异

   • 用浏览器开发者工具查看a和span的计算样式，对比测试场景与网站的差异，重点关注height、vertical-align、line-height、font-size这些属性
   • 排查是否有全局CSS规则（如通配符、标签选择器）意外覆盖了目标元素的样式

3. 逐步复现场景

   • 在测试环境中逐步添加网站的外层嵌套结构，每次添加后检查span高度，定位触发异常的层级
   • 逐步引入网站的全局CSS文件，排查样式冲突点

4. 验证浏览器特定行为

   • 测试Edge 103版本中grid布局结合min-content的计算逻辑，是否存在浏览器bug
   • 尝试给a添加vertical-align: top，看是否能修正span的高度计算问题

内容的提问来源于stack exchange，提问作者Marco van Hilst