Firefox输入框下行字母被裁剪问题及JSFiddle复现差异问询

这个问题我之前也碰到过，本质是不同浏览器的input默认样式差异，加上你设置的height属性和浏览器的盒模型规则冲突导致的，咱们一步步拆解：

为什么Firefox会裁剪文字？ #

Firefox和Chrome对input的默认样式处理有几个关键区别：

• Firefox中input默认带有padding: 1px 2px和border: 1px inset，而且默认的box-sizing是content-box——这意味着你设置的height:1.6em只是内容区的高度，实际元素的总高度还要加上padding和border。但更核心的问题是：内容区高度1.6em可能不足以容纳字体的完整渲染高度（比如g、y这类带下行的字母，很多字体的下行部分会超出1em的基准线范围）。
• Chrome会自动调整input的内部行高和垂直对齐逻辑，即使设置了固定height，也会尽量保证文字完整显示；但Firefox会严格按照你设置的content-box高度限制内容区，最终导致下行字母被裁剪。

解决方法 #

给你几个可行的方案，按需选择：

方案1：用line-height代替height（推荐） #

直接去掉height属性，改用line-height控制输入框高度，浏览器会自动计算足够空间容纳文字：

input {
  line-height: 1.6em;
  /* 可按需添加padding和border，不影响文字显示 */
  padding: 0 2px;
  border: 1px solid #ccc;
}

line-height会直接控制文字的行高，对于input这类替换元素，它能保证文字垂直居中且完整显示，避免盒模型计算带来的复杂问题。

方案2：固定height+border-box盒模型 #

如果一定要用height，就把盒模型改成border-box，让height包含padding和border，同时配合line-height保证文字垂直居中：

input {
  box-sizing: border-box;
  height: 1.6em;
  line-height: 1.4em; /* 略小于height，给border和padding预留空间 */
  padding: 0 2px;
  border: 1px solid #ccc;
}

方案3：重置浏览器默认样式 #

引入CSS重置工具（比如normalize.css），统一不同浏览器的input默认padding、border、font-family等样式，这样你的自定义样式在各浏览器里的表现会更一致。

为什么JSFiddle里复现不了？ #

因为JSFiddle的默认环境会自动引入基础重置样式（类似normalize.css），它已经把各浏览器的input默认样式统一了——比如去掉了默认的inset边框、统一了padding值、标准化了font-family，所以在JSFiddle里，Firefox和Chrome的input初始样式几乎一致，你的height设置就不会出现裁剪问题。而你本地文件和JBoss服务器上的页面没有这些重置，浏览器用了各自的原生默认样式，才会出现差异。

内容的提问来源于stack exchange，提问作者Marcus Junius Brutus