是否可以删除 Safari 中输入字段的顶部填充？

Question

在 Safari 16.6 及更低版本中，如果您的 HTML

input

字段的字体大小大于输入的高度，则输入中的值将在该值上方进行填充，且无法删除或覆盖该值，但占位符将具有与其他浏览器匹配的预期对齐方式

这种情况发生在 MacOS 上的 Safari 16.6 及更低版本，或者 iOS/iPad OS 16 及更低版本上。 Safari 17 和 iOS 17 的行为与所有版本的 Chrome 相同

此问题仅发生在输入中的值时，但使用占位符不会出现相同的问题。一旦在带有占位符的字段中输入内容，它就会出现相同的对齐问题

HTML

<input value="Test">
<input placeholder="Test">

CSS：

input {
  font-size: 50px;
  height: 40px;
  padding: 0;
}

JSFiddle 重现问题：https://jsfiddle.net/4bq91t6k/

Safari 16.6 上的结果：

Chrome 或 Safari 17 上的结果：

我尝试删除浏览器添加的填充/边距，而不进行任何更改。设置行高没有帮助

尝试过设置

input::-webkit-input-placeholder{ padding-top: 10px; }

也没有改变

Answer 1

您所描述的 Safari 16.6 及更低版本中输入字段顶部填充的问题是一种已知的浏览器行为，完全控制或删除可能具有挑战性，尤其是对于输入字段内的值。虽然您尝试修改占位符的

padding-top

，但它不会影响输入内的值，因为它有自己的样式。

Safari 往往有自己的表单元素默认样式，在旧版本中，它的行为可能有所不同。但是，对于输入字段之类的元素，尤其是其值内容，默认样式可能很难完全覆盖。

要解决这个问题，您可以尝试以下几种方法：

1. 使用 CSS 重置：在样式表的开头应用 CSS 重置。这可以帮助规范不同浏览器之间的默认样式。例如：

   input {
     margin: 0;
     padding: 0;
     border: none;
     outline: none;
     /* Add other styling here */
   }
   

2. 设置行高：尝试设置与字体大小匹配的行高。这在某些情况下可能会有所帮助：

   input {
     font-size: 50px;
     height: 40px;
     padding: 0;
     line-height: 50px; /* Match the font size */
   }
   

3. 使用不同的 HTML 结构：在某些情况下，更改 HTML 结构可能会有所帮助。例如，您可以将输入字段包装在容器 div 中并控制容器的样式：

   <div class="input-container">
     <input value="Test">
   </div>
   

   然后，在 CSS 中：

   .input-container {
     font-size: 50px;
     height: 40px;
     padding: 0;
   }
   .input-container input {
     border: none;
     outline: none;
     padding: 0;
     margin: 0;
   }
   

4. 升级 Safari：如果可能，鼓励用户将 Safari 浏览器更新到更新版本，因为此问题已在 Safari 17 及更高版本中修复。