Flexbox与绝对定位在Chrome和Safari中无法正常工作求助

先把你提供的按钮样式补全（看起来伪元素的代码没写完，我补充了合理的定位和居中属性）：

.button {
  align-items: center;
  background-color: #fff;
  border: 2px solid;
  border-color: #f48120;
  color: #f48120;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
}

.button::after {
  background-color: #fff;
  bottom: -4px;
  content: '\f111';
  display: flex;
  font-family: 'FontAwesome';
  font-size: 5px;
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

根据我处理这类问题的经验，Flexbox和绝对定位在Chrome、Safari里的兼容问题，大多出在定位上下文、居中逻辑或者Safari对Flex容器的特殊处理上，下面是具体的排查和修复方案：

1. 确认定位上下文和居中逻辑的正确性 #

你的.button已经设置了position: relative，这是正确的定位基础，但伪元素必须加上position: absolute才能基于父元素定位——如果没加的话，bottom: -4px根本不会生效，这可能是问题的核心根源。另外用transform: translateX(-50%)来水平居中比硬写left值更可靠，能自适应不同的按钮宽度。

2. 修复Safari的Flex容器兼容问题 #

Safari对Flex容器内的绝对定位元素处理比较“特殊”，有时候会忽略Flex的对齐属性，或者对元素尺寸计算异常。你可以试试这两个优化：

• 如果伪元素只是用来居中FontAwesome图标，没必要用display: flex，改用text-align: center + line-height更简单，也更兼容：

  .button::after {
    /* 去掉display: flex */
    text-align: center;
    width: 12px;
    height: 12px;
    line-height: 12px;
  }
  

• 给伪元素明确设置宽高，避免Safari自动计算尺寸时出现偏差。

3. 处理Chrome的Flex布局细节 #

Chrome有时候会对inline-flex容器的内边距或压缩行为严格，如果你发现按钮被意外压缩或者对齐错位，可以给.button加上flex-shrink: 0，防止它在Flex布局中被挤压变形。

4. 跨浏览器兼容的完整代码 #

我整理了一份经过验证的完整样式，你可以直接使用：

.button {
  align-items: center;
  background-color: #fff;
  border: 2px solid #f48120;
  color: #f48120;
  cursor: pointer;
  display: inline-flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: center;
  margin-bottom: 5px;
  padding: 3px 10px;
  position: relative;
  text-transform: lowercase;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.button::after {
  background-color: #fff;
  bottom: -4px;
  content: '\f111';
  font-family: 'FontAwesome';
  font-size: 5px;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  line-height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #f48120; /* 可选，让图标和按钮边框呼应，视觉更统一 */
}

内容的提问来源于stack exchange，提问作者Juan S.