float:right在Chrome生效但Firefox无效，按钮内Span换行问题求助

这个问题我之前处理过，Firefox对于text-align: center的块级容器内使用float:right的元素，排版逻辑确实和Chrome存在差异，导致箭头span被挤到新行。下面给你两种可靠的解决方案：

方案一：使用Flex布局（推荐，兼容性最好） #

Flex是现代浏览器的标准布局方式，完全避免float带来的跨浏览器问题，代码也更简洁：

修改你的.continue-btn CSS：

.continue-btn {
  border: 2px solid #000;
  border-radius: 0px!important;
  width: 100%;
  /* 替换text-align:center为flex布局 */
  display: flex;
  justify-content: center; /* 水平居中内容 */
  align-items: center; /* 垂直居中内容 */
  gap: 8px; /* 控制"CONTINUE"文字和箭头的间距，可按需调整 */
  padding: 0px;
  line-height: 55px;
  color: #000;
  margin: 6% 0%;
}

然后移除箭头span的float:right样式（如果之前设置过），这样文字和箭头会自然在同一行，且整体在按钮中居中，所有浏览器表现一致。

方案二：使用绝对定位（兼容旧浏览器） #

如果需要兼容非常老旧的浏览器，可以用定位替代float：

修改CSS：

.continue-btn {
  border: 2px solid #000;
  border-radius: 0px!important;
  width: 100%;
  text-align: center;
  padding: 0px;
  line-height: 55px;
  color: #000;
  margin: 6% 0%;
  position: relative; /* 开启相对定位，作为子元素绝对定位的参照 */
}

.continue-btn .fa-arrow-right {
  float: none; /* 去掉原有的float样式 */
  position: absolute;
  right: 20px; /* 箭头距离按钮右侧的距离，按需调整 */
  top: 50%;
  transform: translateY(-50%); /* 让箭头垂直居中 */
}

这种方式会把箭头固定在按钮右侧，和文字保持同一行，不会出现换行问题。

问题根源解释 #

你的.continue-btn是宽度100%的块级元素，且设置了text-align:center，Chrome会让内联的文字和float的span在同一行并整体居中，但Firefox中text-align:center仅作用于未脱离文档流的内联元素，float元素会脱离文档流并被挤到新行，这就是两者表现差异的原因。

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