父容器左侧残留红线问题：子元素无法覆盖红线求助

嘿，我来帮你解决这个头疼的小问题！从你提供的代码来看，这条左侧的轻微红线大概率是两种常见原因导致的，咱们逐个排查修复：

1. 浏览器默认样式搞的鬼 #

大部分浏览器会给body、div这类元素添加默认的margin或padding，或者因为盒模型的默认计算方式，导致出现微小的间隙。咱们先把全局样式重置一下，消除这些默认干扰：

/* 全局重置盒模型和默认边距，避免宽高计算偏差 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{ 
  height: 100vh; 
  position: relative; 
  /* 可选：给body加个灰色背景，方便更清晰地查看元素边界 */
  background: #f5f5f5;
}

.main-container{ 
  width: 70%; 
  height: 50vh; 
  background: red; 
  position: absolute; 
  left: 50%; 
  top: 15%; 
  transform: translateX(-50%); 
}

.left { 
  width: 50%; 
  height: 100%; 
  background: white;
  /* 确保元素是块级，完全占满父容器的高度 */
  display: block;
}

这里要注意：你之前给.left加的height: 100% !important完全没必要，只要父容器有明确的高度值，子元素直接设置height:100%就会生效，滥用!important反而会给后续样式调整埋坑。

2. 高DPI屏幕的像素偏移问题 #

如果你的屏幕是高分辨率（比如Retina屏），当父容器的宽度是奇数时，transform: translateX(-50%)可能会导致1px的模糊偏移，看起来像一条红线。咱们可以通过以下两种方式修复：

方法一：添加属性消除像素模糊 #

给.main-container加一个属性，强制浏览器优化渲染：

.main-container{ 
  /* 保留原有样式 */
  backface-visibility: hidden;
}

方法二：换一种居中方式（更稳妥） #

直接用Flex布局来实现居中，避免transform带来的像素偏差：

body{ 
  height: 100vh; 
  /* 用flex替代relative+absolute来居中 */
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 15vh;
  background: #f5f5f5;
}

.main-container{ 
  width: 70%; 
  height: 50vh; 
  background: red; 
  /* 去掉原有的absolute、left、top、transform */
}

快速验证技巧 #

你可以给.main-container临时加个蓝色轮廓：outline: 2px solid blue，看看这条红线是在容器内部还是外部：

• 如果在外部：那就是body的默认margin导致的，全局重置margin:0就能解决。
• 如果在内部：给.left加个绿色轮廓outline: 2px solid green，检查它是否真的完全覆盖了左侧50%的区域。

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