Safari 和 Chrome 占位符文本不同

问：

我只是写了相同的代码，但看起来不同。我该如何解决这个问题？

注意：我不想提供额外的宽度或减小字体大小，因为它不是主要问题的解决方案。（主要问题是占位符之间的差异。我只是改变了设计，但仍然想知道为什么它们不同。如果有人知道，请与我们分享。谢谢！

Safari 版本（占位符文本，.com）：

Chrome 版本（占位符文本，.com）：

法典：

<div className={styles.func_container}>
  <div className={styles.subscribe_container}>
    <input
      type="text"
      placeholder="[email protected]"
      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:[email protected]"
      className={`${styles.button} ${styles.blue}`}
    >
      bize ulaş
    </a>
  </div>
</div>

.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;
}