如何让所有浏览器的jQuery（mobile）按钮带图标徽章正常显示

1. 无需手动修改SVG，用CSS控制SVG尺寸 #

不用逐个给SVG添加width属性，推荐将SVG作为背景图引入伪元素，替代content: url()的写法，这样可以完全通过CSS控制SVG的显示尺寸和位置，无需依赖SVG文件内部的属性：

.button::after {
    content: ''; /* 清空原content */
    position: absolute;    
    top: 4px;
    right: 0px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    color: white;
    border: 1px solid red;
    border-radius: 10px;
    /* 用background属性整合背景色和SVG图标 */
    background: red url("path/to/SVG") center/contain no-repeat;
}

center/contain会让SVG在伪元素内居中显示，同时保持比例完整适配容器大小，彻底绕开SVG自身的尺寸属性限制。

如果坚持使用content: url()的写法，也可以通过CSS直接选中伪元素内的SVG来设置尺寸（部分浏览器需注意兼容性）：

.button::after svg {
    width: 12px; /* 自定义SVG宽度，高度自动按比例缩放 */
    height: auto;
    display: block;
}

2. 优化Safari/Edge的图标居中效果 #

针对这两个浏览器的居中偏差，可从以下几点调整：

• 改用Grid布局：Grid在跨浏览器的居中表现上比Flex更一致，替换Flex相关属性为Grid：

  .button::after {
      /* 替换display: inline-flex为以下两行 */
      display: inline-grid;
      place-items: center;
      /* 其余属性保持不变 */
  }
  

• 强制盒模型规则：添加box-sizing: border-box，确保伪元素的尺寸计算包含边框，避免边框挤压图标空间。
• 微调SVG对齐规则：如果使用的是内嵌SVG而非背景图，给SVG添加preserveAspectRatio="xMidYMid meet"属性（或通过CSS设置svg { preserveAspectRatio: xMidYMid meet; }），确保图标在容器内严格居中。
• 兼容旧版浏览器：针对旧版Safari，可添加-webkit前缀：

  .button::after {
      -webkit-justify-content: center;
      -webkit-align-items: center;
  }
  

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