为何textarea在桌面端显示1行，在iOS移动端显示2行？

问题描述 #

我是一名新手，正在使用TailwindCSS开发聊天机器人的UI界面。目前遇到跨端显示差异问题：textarea组件在桌面端显示为1行（符合预期），但在iOS移动端却显示为2行，不清楚该如何处理，恳请提供解决思路。

显示效果 #

• 桌面端：textarea为1行高度，符合预期
• iOS移动端：textarea默认显示为2行高度

相关代码 #

<body>
    <footer
      class="fixed bottom-0 left-1/2 w-full max-w-4xl -translate-x-1/2 transform bg-white shadow-[0_0_40px_40px_rgba(255,255,255,1)]"
    >
      <div
        class="mx-6 mb-6 flex h-fit flex-none items-center justify-between gap-x-2 rounded-lg border border-gray-200 bg-white py-3 pr-2 pl-4 shadow-sm"
      >
        <textarea
          class="min-h-[24px] max-h-[240px] field-sizing-content flex-1 resize-none border-none text-base outline-0 placeholder:text-gray-400"
          id="prompt__input"
          type="text"
          name="message"
          placeholder="Comment puis-je vous aider ?"
        ></textarea>
        <button
          class="h-8 cursor-pointer px-3 text-xl font-black hover:rounded-lg hover:bg-gray-100 disabled:cursor-progress disabled:border-stone-200 disabled:text-stone-400"
          id="prompt__submit"
          type="button"
        >
          <svg
            class="fill-gray-600"
            aria-hidden="true"
            focusable="false"
            viewBox="0 0 16 16"
            width="22"
            height="22"
          >
            <path
              d="M.989 8 .064 2.68a1.342 1.342 0 0 1 1.85-1.462l13.402 5.744a1.13 1.13 0 0 1 0 2.076L1.913 14.782a1.343 1.343 0 0 1-1.85-1.463L.99 8Zm.603-5.288L2.38 7.25h4.87a.75.75 0 0 1 0 1.5H2.38l-.788 4.538L13.929 8Z"
            ></path>
          </svg>
        </button>
      </div>
    </footer>
</body>

解决思路 #

• 强制指定默认行数：给textarea添加rows="1"属性，覆盖iOS Safari默认的2行渲染行为，明确告诉浏览器默认显示1行：

  <textarea rows="1" class="..." ...></textarea>
  

• 统一高度与行高：当前设置了min-h-[24px]，可以补充h-[24px]固定初始高度，并添加leading-[24px]让单行文本刚好适配高度，避免因为行高导致的额外换行空间：

  <textarea class="h-[24px] min-h-[24px] max-h-[240px] leading-[24px] ..." ...></textarea>
  

• 重置浏览器默认样式：添加Tailwind的appearance-none类，去除浏览器自带的表单控件样式，消除iOS端的特殊渲染逻辑：

  <textarea class="appearance-none ..." ...></textarea>
  

• 组合方案测试：建议同时使用rows="1"+appearance-none+匹配的高度行高，这样能最大程度保证跨端显示一致，后续输入内容时textarea会自动根据内容高度扩展（因为设置了max-h-[240px]和field-sizing-content）。

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