如何为macOS版Google Chrome设置CSS内边距？

Hey there! 针对Mac系统上的Chrome浏览器单独调整CSS内边距，确实需要一些针对性的技巧——毕竟同属WebKit内核的Chrome和Safari在渲染细节上还是有差异，你之前试WebKit属性没成功，大概率是没精准区分开这两个浏览器。

下面给你两种靠谱的实现方式，亲测Mac Chrome有效：

1. 精准命中Mac Chrome的媒体查询 + @supports 组合 #

这个方法的核心是通过Safari特有的CSS属性来排除它，只让规则作用在Mac Chrome上：

/* 仅对Mac系统的Chrome生效 */
@media screen and (min-width: 1px) {
  @supports (-webkit-appearance: none) and (not (-apple-pay-button-style: plain)) {
    /* 替换成你的目标元素选择器 */
    .your-target-element {
      padding: 12px 16px; /* 自定义内边距值 */
      box-sizing: border-box; /* 可选：确保内边距不会撑大元素 */
    }
  }
}

• 解释：-apple-pay-button-style是Safari独有的属性，用not排除它后，剩下的就是Mac Chrome了；-webkit-appearance: none用来锁定WebKit内核浏览器。

2. 针对表单控件的特殊内边距调整 #

如果你是要调整输入框、按钮这类表单元素的内边距，Mac Chrome有自己的默认样式，可能需要结合WebKit专属属性：

@media screen and (min-width: 1px) {
  @supports (-webkit-appearance: none) and (not (-apple-pay-button-style: plain)) {
    input[type="text"], button {
      /* 优先用标准属性，再补WebKit前缀 */
      padding: 8px 12px;
      -webkit-padding-start: 12px;
      -webkit-padding-end: 12px;
      /* 重置默认样式避免冲突 */
      -webkit-appearance: none;
      border: none;
    }
  }
}

小提示 #

• 如果你发现自定义样式被覆盖，打开Chrome开发者工具的「Computed」面板，看看是不是浏览器默认样式或者其他CSS规则优先级更高，这时可以用更具体的选择器（比如加上父元素类名），必要时再用!important（尽量少用，避免样式混乱）。
• 测试的时候记得清空浏览器缓存，或者用无痕模式打开，避免旧样式干扰。

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