设置size为占位符长度时input元素占位符被截断问题

问题背景 #

我给input元素设置了23字符的占位符，通过CSS设置font-size:12px，并用JavaScript将size属性设为占位符长度（23），期望内容能完整显示，但出现以下浏览器兼容性问题：

• Chrome 121.0.6167.185：占位符被截断；将字号改为11px或13px时显示正常。
• 进一步测试：仅给::placeholder设置font-size:12px，占位符显示完整；但同时给input和::placeholder都设12px时，占位符再次截断。
• Firefox 122.0.1：占位符显示完整，但输入的文本被截断。

根据HTML规范，size属性定义为："指定用户代理在视觉渲染中允许用户编辑元素值时可见的字符数"，实际表现与预期不符。

问题1：Chrome中input{font-size:12px}时占位符为何被截断？ #

目前没有官方明确解释，但推测是Chrome渲染引擎的内部布局计算差异导致：
当input元素与占位符使用相同字号时，Chrome对占位符的水平空间计算可能存在偏差——比如字符宽度取整、内边距的额外占用，或是占位符文本的排版逻辑与输入文本不一致，导致23字符的占位符无法在size=23的input容器内完整展示。这属于浏览器渲染的兼容性细节问题。

问题2：如何在font-size:12px下让占位符和输入文本都完整显示？ #

可行的解决方案有两种：

1. 仅给::placeholder设置字号，匹配input的默认字号逻辑
   保持input的字号继承或默认值，仅对::placeholder设置font-size:12px，同时保留size=23的设置，即可让两者都完整显示。

2. 用CSS width替代size属性精确控制宽度
   放弃依赖size属性的浏览器自动计算，通过CSS根据字符数量和字号手动计算输入框宽度，避免浏览器渲染差异：

   input {
     font-size: 12px;
     /* 按字符宽度+内边距计算：示例中23个字符，每个字符约8px，加上左右内边距各8px */
     width: calc(23 * 8px + 16px);
     box-sizing: border-box;
     padding: 0 8px;
   }
   input::placeholder {
     font-size: 12px;
   }
   

   这种方式能精准控制输入框宽度，确保占位符和输入文本都不会被截断，同时兼容Chrome和Firefox。

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