这个iOS Safari的奇葩bug我之前踩过坑！明明在其他浏览器（包括macOS Safari响应式模式）里显示正常，偏偏iOS 11.2.6的textarea多行占位符首行会莫名出现缩进，试试下面这两个方案：

方案一：用CSS伪元素模拟占位符（最稳妥） #

原生placeholder属性在旧版iOS Safari里的样式兼容性很差，我们可以用伪元素完全自定义占位符，彻底避开这个bug：

CSS代码 #

/* 包裹textarea的容器 */
.textarea-wrap {
  position: relative;
}
/* 模拟占位符的伪元素 */
.textarea-wrap::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 6px; /* 匹配textarea的内边距，按需调整 */
  left: 6px;
  color: #999; /* 模拟原生占位符颜色 */
  pointer-events: none; /* 不干扰输入框的点击/聚焦 */
  white-space: pre-wrap; /* 保留换行符，实现多行显示 */
}
/* 聚焦时隐藏伪元素 */
.textarea-wrap textarea:focus + ::before {
  display: none;
}
/* 确保textarea和伪元素对齐 */
.textarea-wrap textarea {
  height: 50px;
  padding: 6px;
  box-sizing: border-box;
}

HTML代码 #

<div class="textarea-wrap" data-placeholder="multi line place holder text in many lines">
  <textarea></textarea>
</div>

原理是把占位符文本存在容器的data-placeholder属性里，用伪元素渲染出来，这样我们能完全控制它的位置、缩进和换行，不受iOS原生样式的影响。

方案二：重置textarea的默认样式（快速尝试） #

如果不想改结构，可以试试强制重置iOS Safari给textarea加的默认样式：

textarea {
  -webkit-appearance: none;
  appearance: none;
  text-indent: 0 !important;
  padding-left: 0; /* 或者根据你的布局调整 */
}

不过这个方案不一定100%生效，因为旧版iOS的placeholder样式是浏览器内置的，可能无法通过常规CSS覆盖，所以更推荐方案一。

补充说明 #

这个bug是iOS Safari 11.x版本特有的，对多行placeholder的文本渲染处理有问题，首行的缩进是浏览器自动添加的，原生属性很难直接修正，用伪元素模拟是目前最可靠的解决方式。

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