iPhone端Input元素样式兼容性问题及修复方案咨询

iPhone上使用input元素时，输入的数字会超出输入框范围，但Android/PC端显示正常。

iPhone端异常效果：

Android/PC端正常效果：

当前使用的代码 #

CSS代码 #

html * {
  font-size: 36px !important;
  color: #0 !important;
  font-family: Arial !important;
  box-sizing: border-box;
}

.common-flex {
  display: -webkit-flexbox;
  display: -webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
  display: -webkit-flex;/* Chrome 21+ */
  display: -ms-flexbox;/* WP IE 10 */
  display:flex;/* android 4.4 */
}

.common-flex-spacebetween {
  -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
  -webkit-justify-content: space-between;/* Chrome 21+ */
  -ms-flex-pack: justify;/* WP IE 10 */
  justify-content: space-between;/* android 4.4 */
}

HTML代码 #

<div class="common-flex common-flex-spacebetween" style="margin: 30px 0px 0px 0px; padding:0px;" >
  <input name="yy" type="num" id="yy" style="width:110px; text-align:center;" aria-label="year"/>
  <label id="xx1" style="float: center;">/</label>
  <input name="mon" type="num" id="mon" style="width:60px; text-align:center;" aria-label="month"/>
  <label id="xx2" style="float: center;">/</label>
  <input name="dd" type="num" id="dd" style="width:60px; text-align:center;" aria-label="day"/>
</div>

修复方案及修改后的代码 #

关键修复点 #

1. 修正input的type="num"为标准的type="number"，iOS对非标准类型的渲染存在兼容问题。
2. 移除无效的float: center样式（float属性无center取值）。
3. 给flex容器添加align-items: center，确保输入框与标签垂直居中对齐。
4. 针对iOS Safari添加专属样式重置：取消默认输入框外观、固定输入框高度并设置一致的行高，避免内容溢出。
5. 修正CSS中color: #0的错误写法为color: #000。

修改后的CSS代码 #

html * {
  font-size: 36px !important;
  color: #000 !important; /* 修正颜色值写法 */
  font-family: Arial !important;
  box-sizing: border-box;
}

.common-flex {
  display: -webkit-box;/* android 2.1-3.0, ios 3.2-4.3 */
  display: -webkit-flex;/* Chrome 21+ */
  display: -ms-flexbox;/* WP IE 10 */
  display:flex;/* android 4.4 */
  align-items: center; /* 添加垂直居中 */
}

.common-flex-spacebetween {
  -webkit-box-pack: justify;/* android 2.1-3.0, ios 3.2-4.3 */
  -webkit-justify-content: space-between;/* Chrome 21+ */
  -ms-flex-pack: justify;/* WP IE 10 */
  justify-content: space-between;/* android 4.4 */
}

/* iOS 输入框专属样式重置 */
input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  padding: 0; /* 移除默认内边距 */
  border: 1px solid #000; /* 可根据需求调整边框样式 */
  height: 50px; /* 固定高度匹配字体大小 */
  line-height: 50px; /* 与高度一致，确保内容垂直居中 */
}

修改后的HTML代码 #

<div class="common-flex common-flex-spacebetween" style="margin: 30px 0px 0px 0px; padding:0px;" >
  <input name="yy" type="number" id="yy" style="width:110px; text-align:center;" aria-label="year"/>
  <label id="xx1">/</label>
  <input name="mon" type="number" id="mon" style="width:60px; text-align:center;" aria-label="month"/>
  <label id="xx2">/</label>
  <input name="dd" type="number" id="dd" style="width:60px; text-align:center;" aria-label="day"/>
</div>

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