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

【问题标题】：Why the input box is showing so different on Ipad but not on chrome为什么输入框在 Ipad 上显示如此不同，但在 chrome 上却没有
【发布时间】：2013-10-12 22:19:39
【问题描述】：

我有一个工作正常的网站，除了输入字段和旁边的提交按钮。它们无法在 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>

同样的 CSS 是：

#search-form {
    overflow: auto;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 26px;
}

input#Search {
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

.defaultText {
    width: 88%;
    padding-left: 4px;
    height: 29px;
    float: left;
    background-color: #f7f7f7;
    border-right: 0px solid #666;
    border-bottom: 1px solid #666;
    border-color: #999;
    margin-right: -33px;
}

.defaultTextActive {
    color: #999;
    font-style: italic;
    font-size: 15px;
    font-weight: normal;
}

.search_btn {
    font-size: 13px;
    font-weight: bold;
    height: 34px;
    cursor: pointer;
    float: right;
    margin: 0;
    width: 33px;
    background: url("../images/search.jpg") no-repeat;
    text-indent: -99999px;
    border: 1px solid #999;
    border-top: 2px solid #000;
    margin-top: 0px;
    margin-right: 1px;
}

如您所见，输入的边框效果在 iPad 中也没有正确呈现。有人知道吗？

【问题讨论】：

标签： ipad css border-layout border-color

【解决方案1】：

这个 CSS 的 sn-p 将从您的文本框中删除默认的 WebKit 样式：

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

也适用于 iOS 7。

【讨论】：

【解决方案2】：

尝试使用 -webkit-appearance 摆脱默认样式。

检查这个问题： iOS forces rounded corners and glare on inputs https://stackoverflow.com/a/14758383

【讨论】：

我这样做了 - 它有所帮助，但 ios 上的输入字段仍然高于浏览器中的输入字段......什么给出了？

【解决方案3】：

请使用：

-webkit-外观：无；

【讨论】：

欢迎来到 Stackoverflow。请解释您的答案，以便以后检查此答案的其他用户可以轻松理解。