Chrome浏览器下设置monospace字体的input控件下划线字符不显示问题

问题产生原因 #

该问题是Chrome浏览器特性与系统默认等宽字体的渲染规则共同导致的：

1. Windows平台下Chrome默认调用的Courier New等系统原生等宽字体，下划线的渲染位置比普通字体更偏下；
2. input输入控件默认开启了内容裁切，且默认行高、内边距的配置没有给底部的下划线预留足够的渲染空间，导致位置偏下的下划线刚好落在裁切区域外，视觉上就像消失变成了空格。

可行解决方案 #

可以根据业务场景选择以下任意一种或多种组合方案：

• 显式指定适配的等宽字体栈，优先选择下划线位置更合理的等宽字体，避免使用Chrome默认的系统等宽字体：

  input {
    font-family: Consolas, "Source Code Pro", Monaco, "Courier New", monospace;
  }
  

• 调整输入控件的行高，给下划线预留足够的垂直渲染空间：

  input {
    line-height: 1.5;
  }
  

• 增加输入框的底部内边距，避免底部内容被裁切：

  input {
    padding-bottom: 2px;
  }
  

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