css - 如何修复到期/CVC/ZIP的位置

我已经在网站上创建了Stripe Elements卡形式，但遇到了一些麻烦。现在，它看起来像这样：



如您所见，有效期限和CVC输入相互压缩。

如果我填写它们，则ZIP输入不在框架之内。



看来这是因为在定义我的card元素的样式时，我已经在占位符元素中添加了字母间距。

var style = {
  base: {
    color: "#fff",
    fontFamily: '"Source Sans Pro", sans-serif',
    textTransform: "uppercase",
    fontSize: '12px',
    iconColor: "#bbb",
    lineHeight: "37px",
    maxHeight: "37px",
    verticalAlign: "middle",
    letterSpacing: "0.5px",
    '::placeholder': {
      color: '#bbb',
      fontFamily: '"Source Sans Pro", sans-serif',
      letterSpacing: "2px",
    },
    '::selection': {
      color: '#fff',
      backgroundColor: '#333',
    }
  }
};

从:: placeholder删除字母间距可以解决此问题，但是我真的很想保留它以便与我网站其余部分的样式保持一致。

有谁知道我该如何解决？

谢谢。

最佳答案

看起来这是您的主要letterSpacing和::placeholder letterSpacing值不匹配的结果；如果将base.letterSpacing值也设置为2px，则它似乎可以工作（尽管它确实暂时将CVC推到了一边）。