移動Safari文本區域背景

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瀏覽器的移動。會給出默認的外觀。我建議你，如果這是你的第一個Web應用程序，請試用iphone的iWebKit css3框架。你會發現很好的教程，例子和社區。