移动端浏览器中height:100%的Anchor超出父div问题排查

问题原因 #

• 移动端浏览器（比如iOS Safari）对行内元素的渲染规则更严格。a标签默认是行内元素，即使手动设置宽高为100%，行内元素的高度计算会受基线对齐等规则影响，容易出现高度溢出的情况，而桌面浏览器可能做了兼容处理，所以表现正常。
• 部分移动端浏览器会给a标签添加默认的点击高亮样式或额外布局空间，也可能导致高度超出父元素。
• 如果父元素没有设置box-sizing: border-box，当父div有内边距或边框时，子元素的100%高度会基于父元素的内容盒高度叠加，进而超出父元素范围（不过你的宽度正常，这个可能不是主因，但也需要排查）。

解决方法 #

1. 将a标签转为块级元素 #

行内元素本身不支持宽高设置，转成块级元素后，宽高100%的设置才能完全生效：

.grid-item a {
  display: block;
  width: 100%;
  height: 100%;
}

也可以用inline-block，但block更能确保填充整个父容器。

2. 统一盒模型计算规则 #

给父元素和a标签都设置box-sizing: border-box，避免内边距、边框影响尺寸计算：

.grid-item, .grid-item a {
  box-sizing: border-box;
}

3. 重置移动端默认样式 #

去除a标签的默认边距和点击高亮，避免额外布局干扰：

.grid-item a {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* 消除iOS点击时的高亮背景 */
}

4. 确保父元素高度明确 #

如果grid容器的高度是动态分配的，给grid-item加上height: 100%，保证子元素的高度计算有明确的参照：

.grid-item {
  height: 100%;
}

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