CSS按钮在Chrome显示正常Safari位置偏移的修复方案咨询

这个差异主要来自Safari和Chrome对inline-block类型表单元素的默认对齐规则、内置默认样式的渲染差异，可按以下步骤修复：

• 统一输入框和提交按钮的垂直对齐规则：默认inline元素走基线对齐，不同浏览器基线计算逻辑不同，给两个元素都加vertical-align: middle属性
• 清除Safari的默认内置样式：Safari会给原生表单元素自动加默认边距、内边距覆盖自定义样式，给按钮和输入框都加-webkit-appearance: none，同时统一加margin: 0清除默认外边距
• 固定统一高度和行高：避免内容撑开高度的计算逻辑差异，给两个元素设置相同的高度和行高，同时统一盒模型规则避免宽高计算偏差

修改后的完整参考代码 #

/* 输入框新增样式，原有样式可保留 */
#movie_title {
  margin: 0;
  vertical-align: middle;
  height: 32px;
  line-height: 32px;
  -webkit-appearance: none;
  box-sizing: border-box;
}

/* 提交按钮修改后样式 */
.go {
  background-color: #2768B5;
  border: none;
  color: white;
  padding: 0 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 10px;
  /* 新增属性 */
  -webkit-appearance: none;
  margin: 0;
  vertical-align: middle;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
}

如果调整后还有极微小的偏移，可加Safari专属的微调样式：

/* 仅Safari浏览器生效，按需调整top数值即可 */
@supports (-webkit-touch-callout: none) {
  .go {
    position: relative;
    top: 1px;
  }
}

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