父元素color1设relative时给子color2加absolute致border-bottom消失如何解决

• 核心是 inline-block 元素的基线渲染逻辑和绝对定位元素的特性共同导致的：
  1. 设置了 position: absolute 的元素会脱离正常文档流，本身不参与父元素的尺寸计算，但如果没有显式设置 top/left 等偏移属性，元素会停留在自身原本的静态位置（即跟在父元素内文本 muthu 的后方）
  2. 浏览器默认对 display: inline-block 元素的基线计算规则为：取内部最后一行文本的基线。部分浏览器渲染时会误将脱离文档流的绝对定位元素的位置纳入基线计算参考，导致父元素的基线被异常下拉，最终 border-bottom 被挤出可视区域，或者被其他元素覆盖。

你可以根据自己的业务需求任选一种方案：

• 方案一：给父元素显式设置底部内边距或固定高度，强制撑开父元素高度保证边框可见

.color1 {
  position: relative;
  border-bottom: 2px dotted;
  display: inline-block;
  padding-bottom: 2px; /* 可根据实际样式调整数值 */
  /* 也可设置固定高度：height: 22px; */
}

• 方案二：给绝对定位的子元素显式设置偏移值，明确其定位位置，避免干扰父元素的基线计算

.color2 {
  position: absolute;
  /* 下面的偏移值可根据你的布局需求调整，比如要放到父元素下方就设 top: 100% */
  top: 0;
  left: 100%;
}

• 方案三：如果不需要行内块的特性，将父元素的 display 属性改为 block，block 元素的高度计算不受基线对齐逻辑影响，不会触发该问题

.color1 {
  position: relative;
  border-bottom: 2px dotted;
  display: block;
}

• 方案四：修改父元素的垂直对齐规则，避开默认的基线对齐逻辑

.color1 {
  position: relative;
  border-bottom: 2px dotted;
  display: inline-block;
  vertical-align: bottom; /* 也可设为 top，根据布局需求选择 */
}

内容的提问来源于stack exchange，提问作者Dinesh.r