Html 输入字段在Safari中未对齐

我试图让这两个输入直接相互关联。以下是我希望它们在Chrome中的外观：

然而，这就是它们在Safari中的样子：

由于某种原因，它们的高度大约降低了1或2倍

这是我的HTML：

<input type="text" name="email" placeholder="Email Address" /><input type="button" name="button" value="Sign-Up">

---

不知道为什么Safari中会出现像素差，谢谢大家的帮助

试着将

文本的高度更改为50px
，因为文本框的高度和按钮的高度不同。它们应该是相同的@GeorgeThey它们确实不同，所以这就引出了另一个问题：为什么它们的高度不相同，而高度为50px？太令人困惑了！我直接复制并粘贴了您的代码，并将它们都更改为50px，在我这方面看起来很棒。你还有其他的CSS吗@乔治只是把它扔进小提琴里，看起来还是不太好/好的，我想出来了，需要的盒子尺寸：内容盒；
input[type="text"] {
    width: 200px;
    height: 30px;
    padding: 10px 20px;
    color: #555459;
    font-size: 18px;
    border: 0;
}

input[type="button"] {
    font: normal;
    margin: 0;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
    border: 0;
    height: 50px;
}