Firefox与Chrome对相同CSS渲染不一致问题求助

问题根源 #

• 绝对定位元素未指定left/top时，Chrome和Firefox的默认起始定位逻辑存在差异，直接导致错位
• 冗余属性无效：display: inline-block对绝对定位元素不生效（绝对定位会让元素脱离文档流）；content仅对伪元素（:before/:after）起作用，普通div设置该属性毫无意义
• 父元素未设置position: relative，绝对定位元素会相对于最近的定位祖先（若没有则是视口）定位，进一步放大了跨浏览器的定位差异

修复方案 #

1. 给父元素#juniorLinkList添加position: relative，让子元素相对于它定位
2. 删除两个div的display: inline-block和content冗余属性
3. 统一设置两个div的top和left来固定位置，垂直条通过transform: rotate(90deg)实现，避免重复调整定位值
4. 用top: 50%+transform: translateY(-50%)实现垂直居中，替代固定像素的margin-top，适配不同字号和浏览器渲染

修改后的代码 #

HTML（无需改动）

<li id="juniorLinkList">
 <a id="juniorLink" href="#">Junior</a>
 <div id="horizPlusjun"></div>
 <div id="vertPlusjun"></div>
</li>

CSS

#juniorLinkList {
  position: relative; /* 关键：让子元素相对自身定位 */
  display: inline-block; /* 让父元素包裹内容，避免占满整行 */
  padding-right: 20px; /* 给加号留出显示空间 */
}

#horizPlusjun, #vertPlusjun {
  cursor: pointer;
  position: absolute;
  width: 10px;
  height: 2px;
  background: white;
  border-radius: 2.5px;
  transition: all 0.5s ease;
  top: 50%; /* 垂直居中对齐文字 */
  right: 0; /* 定位到父元素右侧 */
  transform: translateY(-50%); /* 修正垂直居中的像素偏移 */
}

#vertPlusjun {
  transform: translateY(-50%) rotate(90deg); /* 旋转为垂直条 */
}

额外优化建议 #

• 可以用伪元素替代两个div，减少DOM节点：给#juniorLink或#juniorLinkList添加:before和:after伪元素实现加号，代码更简洁
• 避免使用12.2px这类非整数值的margin，不同浏览器对小数像素的渲染逻辑有差异，优先用百分比或transform实现对齐

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