Safari与Chrome中placeholder文本显示差异原因及解决方案咨询

显示效果差异 #

Safari版本（Placeholder文本：.com）：

Chrome版本（Placeholder文本：.com）：

问题说明 #

我编写了完全相同的代码，但Safari和Chrome中input的placeholder文本显示效果却不一致。我不想通过增加额外宽度或缩小字体大小来处理，因为这并非针对核心问题的解决方案（核心问题是两款浏览器中placeholder的显示差异）。我已经调整了设计，但仍想了解差异产生的原因。

代码实现 #

HTML代码

<div className={styles.func_container}>
  <div className={styles.subscribe_container}>
    <input
      type="text"
      placeholder="johndoe@example.com"
      className={styles.text_input}
    />
    <div className={styles.button}>abone ol</div>
  </div>
  <div className={styles.contact_container}>
    <h1 className={styles.contact_text}>veya</h1>
    <a
      href="mailto:info@catoflow.com"
      className={`${styles.button} ${styles.blue}`}
    >
      bize ulaş
    </a>
  </div>
</div>

CSS代码

.text_input {
  border: none;
  outline: none;
  width: 580px;
  font-size: 54px;
  font-weight: 700;
  color: var(--black);
  caret-color: var(--light-gray);
}

.text_input::-ms-input-placeholder {
  font-size: 54px;
  font-weight: 700;
  color: var(--light-gray);
  opacity: 1;
}

.text_input::placeholder {
  font-size: 54px;
  font-weight: 700;
  color: var(--light-gray);
  opacity: 1;
}

差异产生的核心原因 #

• 渲染引擎差异：Chrome基于Blink引擎，Safari基于WebKit引擎，两者虽同源但后续发展路径不同，对placeholder文本的排版算法、字符间距计算逻辑存在细微区别，大字号下这种差异会被放大。
• 字体渲染机制不同：Chrome使用Skia渲染字体，Safari在苹果系统上使用Core Text，两者对同一字体的字重、字符宽度的计算方式有差异，导致相同文本在相同宽度容器内的显示范围不同。
• 浏览器默认样式差异：两款浏览器对input元素及placeholder的默认样式（如隐性内边距、文本对齐规则）有各自的实现，即使显式覆盖了字号、字重，底层的渲染规则仍可能导致视觉偏差。
• 盒模型计算差异：不同浏览器对input的盒模型计算可能存在区别，比如默认padding、border的处理不同，导致实际可用的文本显示区域宽度不一致，进而引发placeholder的截断差异。

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