为什么输入框在Ipad上显示如此不同，而在chrome上却没有

我有一个网站，这是正常工作，除了输入字段和提交按钮旁边。它们没有在iPad上正确显示。输入框的高度略高于提交按钮，使其看起来很奇怪

我个人认为iPad是safari mobile，具有不同的视口（1024px）等，但呈现出与Chrome相同的webkit外观。那么为什么输入框在iPad上显示不同呢

---

下面是它在我的桌面上的Google Chrome中的外观：

以下是它在iPad上的外观：

HTML部分简单如下：

<div id="search-form">
    <input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
    <input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>

---

正如您所见，输入的边界效果在iPad中也没有正确呈现。有人对此有任何线索吗？

尝试使用-webkit外观来摆脱默认样式

检查此问题：

---

尝试使用-webkit外观来摆脱默认样式

检查此问题：

---

此CSS片段将从文本框中删除默认的WebKit样式：

input[type="text"] {
    -webkit-appearance : none;
    border-radius      : 0;
}

---

iOS 7也适用。

此CSS片段将从文本框中删除默认的WebKit样式：

input[type="text"] {
    -webkit-appearance : none;
    border-radius      : 0;
}

也适用于iOS 7。

请使用：

-webkit外观：无

请使用：

---

-webkit外观：无

我这样做了-这很有帮助，但ios上的输入字段仍然高于浏览器中的输入字段。。。有什么好处？我这样做了-这很有帮助，但ios上的输入字段仍然高于浏览器中的输入字段。。。给你什么？欢迎来到Stackoverflow。请解释您的答案，以便其他用户在将来检查此答案时能够轻松理解。欢迎使用Stackoverflow。请解释您的答案，以便将来检查此答案的其他用户能够轻松理解。