2

我有这个网站http://www.taranmarlowjewelry.com/?page_id=5在右上角我有一个输入按钮，它在 iPhone 上看起来很奇怪，我不知道为什么。它变成了一个圆形/气泡状按钮。

这是输入按钮的 HTML

<input type="submit" id="button" name="button" class="searchBtn" value="GO"/>

这是CSS

.searchBtn{
    background-color:#ffa18a;
    color:#FFF;
    height:31px;
    padding:0;
    width:32px;
    border:0;
    cursor:pointer;
}

任何帮助将不胜感激！

4

3 回答 3

8

我解决了我的问题，但像这样调整我的CSS......

.searchBtn{
    background-color:#ffa18a;
    color:#FFF;
    height:31px;
    padding:0;
    width:32px;
    border:0;
    cursor:pointer;
   -webkit-appearance: none;
}

通过添加-webkit-appearance: none;按钮现在看起来不错的 iphone，这也适用于 iPad。

于 2012-07-19T15:23:29.240 回答
3

如果您的网站上有很多不同的按钮，这是一个问题，请尝试：

input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
}

这应该重置所有输入按钮，而不会导致复选框和其他输入出现问题。保持 CSS 的其余部分保持原样。

考虑将 -moz-appearance 和 -ms-appearance 也设置为 none...

于 2013-01-15T18:39:20.473 回答
0

如果您可以访问 Mac，您可以在 Safari 中打开开发人员工具并将浏览器置于 iPhone 模拟模式并尝试以这种方式进行调试。

于 2012-07-07T21:11:11.973 回答