无序列表中textarea项目符号位置偏移问题求助

我之前开发WYSIWYG编辑器时也碰到过这个Firefox特有的小坑，给你几个纯CSS的解决方案，亲测在新版Firefox里完全有效：

方案一：直接设置textarea的垂直对齐为顶部 #

这是最简单直接的方法，核心是修正textarea默认的基线对齐方式：

li textarea {
  vertical-align: top;
}

Firefox中textarea的默认vertical-align值是baseline，而textarea的基线位置在元素底部，导致项目符号跟着对齐到底部。改成top后，项目符号会自动和textarea的顶部对齐。

方案二：用Flex布局重构列表项 #

如果你的样式结构允许，用Flex布局可以更灵活地控制对齐：

li {
  display: flex;
  align-items: flex-start; /* 让子元素顶部对齐 */
}

Flex布局会自动调整列表项内元素的对齐方式，align-items: flex-start确保textarea和项目符号都靠顶部对齐，这个方法兼容性也很好，新版Firefox完全支持。

方案三：给textarea添加包裹容器（适用于样式冲突场景） #

如果直接修改textarea的样式会和其他全局样式冲突，可以给textarea套一个容器来调整对齐：

<ul>
  <li>Bullet is at <br/>the top</li>
  <li><input type="text" value="Bullet is centered" /></li>
  <li><span class="textarea-wrap"><textarea placeholder="Bullet is aligned top now"></textarea></span></li>
</ul>

.textarea-wrap {
  vertical-align: top;
  display: inline-block;
}

通过包裹容器的对齐设置，间接修正textarea和项目符号的对齐关系，避免影响全局textarea样式。

完整可运行示例 #

<ul>
  <li>Bullet is at <br/>the top</li>
  <li><input type="text" value="Bullet is centered" /></li>
  <li><textarea placeholder="Bullet is aligned top now"></textarea></li>
</ul>
<style>
li textarea {
  vertical-align: top;
}
</style>

这些方法都不需要JavaScript，纯HTML/CSS就能解决你的问题，而且完全满足你兼容新版Firefox的需求，不用考虑其他浏览器~

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