Question

在所有其他浏览器中运行良好的文本区域正在打破移动版Safari。请参阅下面的图片以查看操作中的细分：默认背景出现在我在样式表中指定的内容上，并且在焦点上发生了一些非常奇怪的事情。

http://gettinderbox.com/blogdesign/i/safarimobile.PNG

这是CSS和标记：

#search_form, {
    height: 13px;
    width: 188px;
    border: 1px solid #d9d9d9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    background-color: #f6f6f6;
    float: left;
    padding: 5px;
}

#search_form:hover, #search_form:focus {
    border: 1px solid #de6b2c;
    outline: none;
}

<input id="search_form" type="text" name="search_form" title="Search" value="" tabindex="1"  />

Answer 1

也许你会因为#search_form之后有逗号而得到错误？

编辑：确定在iphone上测试一下。问题不在于逗号。到目前为止，让我知道的唯一方法是在你的css中使用它：

来自这个

#search_form {
    height: 13px;
    width: 188px;
    border: 1px solid #d9d9d9;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    background-color: #f6f6f6;
    float: left;
    padding: 5px;
}

转到此处：

#search_form[type="text"] {
    height: 13px;
    width: 188px;
    -webkit-border-radius: 100px;
    float: left;
    padding: 5px;
}

以上代码适用于safari mobile。将给出默认外观。我建议你，如果它是你构建的第一个网络应用程序，请尝试iphone的iWebKit css3框架。您将找到非常好的教程，示例和社区。

移动Safari文本区域背景

1 个答案: