Firefox浏览器中margin-left与margin-right样式生效异常求助

• 统一盒模型规则
  不同浏览器的默认盒模型计算逻辑存在微小差异，你可以在样式表开头添加全局规则统一盒模型，避免尺寸计算出现偏差：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

box-sizing: border-box会将padding、border的宽度计算到元素总宽高中，彻底统一不同浏览器的元素尺寸计算逻辑。

• 检查元素的display属性
  如果该样式应用在行内元素（如<span>、<a>标签）上，上下padding不会改变元素在正常文档流中的占位高度，Chrome和Firefox对这类场景的渲染逻辑本身存在差异。你可以给当前元素添加display: inline-block或者display: block属性，即可统一上下padding的渲染表现。

• 补全圆角适配规则
  部分版本Firefox对圆角的裁剪逻辑和Chrome不同，你可以给当前元素添加overflow: hidden属性，确保圆角区域正确裁剪超出的内容。

调整后的参考样式如下：

display: inline-block; /* 可根据布局需求替换为block */
background-color: #7B618F;
padding-top: 30px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
border-radius: 0 0 10px 10px;
margin-right: 2px;
margin-left: 2px;
font-size: 12px;
color: #fff;
overflow: hidden;

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