如何统一HTML time输入框在不同浏览器中的文本间距？

原生type="time"输入框在Firefox和Chrome中的渲染差异确实麻烦，尤其是固定宽度布局下，Firefox默认的数字与AM/PM间距更大，容易导致文本截断。你之前用的全局间距调整会让Chrome显示过于紧凑，解决思路是针对不同浏览器分别设置样式，避免一刀切。

方法一：利用浏览器特性检测单独适配Firefox #

通过@supports规则检测Firefox专属的CSS属性，只在Firefox中应用间距调整，Chrome等Webkit浏览器保持默认样式：

input[type='time']::-webkit-calendar-picker-indicator {
  /* 隐藏Webkit浏览器的时钟图标 */
  display: none;
}

.time-range-selector {
  width: 14.5rem !important;
}

/* 仅对Firefox应用间距调整 */
@supports (-moz-appearance: none) {
  .adjusted-time-spacing {
    word-spacing: -6px;
    letter-spacing: -1px;
  }
}

/* Webkit浏览器保持默认间距（或根据需求微调） */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .adjusted-time-spacing {
    word-spacing: normal;
    letter-spacing: normal;
  }
}

方法二：结合内边距调整优化可用空间 #

如果不想过度调整字符间距，也可以通过减小Firefox下输入框的内边距，来增加文本的可用显示空间，避免截断：

input[type='time']::-webkit-calendar-picker-indicator {
  display: none;
}

.time-range-selector {
  width: 14.5rem !important;
}

/* Firefox下缩小内边距，保留默认字符间距 */
@supports (-moz-appearance: none) {
  input[type='time'].form-control {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
}

完整示例代码 #

HTML部分无需变动，CSS替换为上述任一方案即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>

<div class="container pt-4">
  Default
  <div class="mb-4 input-group time-range-selector">
    <input type="time" aria-label="Begin Time" class="form-control" value="08:00">
    <span class="input-group-text">-</span>
    <input type="time" aria-label="End Time" class="form-control" value="17:00">
  </div>
  
  Adjusted (Cross-Browser)
  <div class="input-group time-range-selector">
    <input type="time" aria-label="Begin Time" class="form-control adjusted-time-spacing" value="08:00">
    <span class="input-group-text">-</span>
    <input type="time" aria-label="End Time" class="form-control adjusted-time-spacing" value="17:00">
  </div>
</div>

原理说明 #

• @supports (-moz-appearance: none)：精准匹配Firefox浏览器，-moz-appearance是Firefox专属的CSS属性。
• @media screen and (-webkit-min-device-pixel-ratio: 0)：匹配所有Webkit内核浏览器（Chrome、Edge、Safari等），确保这些浏览器不应用Firefox的间距规则。

这种方式既能解决Firefox的文本截断问题，又不会破坏Chrome等浏览器的正常显示效果。

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