爲什麼輸入框在Ipad上顯示如此不同，但不在鉻上

我有一個正常工作的網站，除輸入字段和提交按鈕旁邊。他們沒有在iPad上正確顯示。輸入框的高度略高於提交按鈕，使其看起來很奇怪。爲什麼輸入框在Ipad上顯示如此不同，但不在鉻上

我個人認爲iPad是safari-mobile，擁有不同的視口（1024px）等，但呈現與Chrome相同的webkit外觀。那爲什麼輸入框在iPad上顯示不同？

這裏是如何看起來谷歌瀏覽器在我的桌面上：

Desktop Version of input box

這裏是它的外觀在iPad上：

Same input box on 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上呈現。任何人都有任何線索？

來源

2013-10-12 ashutosh

嘗試使用-webkit外觀來擺脫默認樣式。

檢查這個問題： iOS forces rounded corners and glare on inputs https://stackoverflow.com/a/14758383

來源

2013-11-06 15:20:43 user1296703

我做到了這一點 - 它有幫助，但輸入字段仍然比在瀏覽器上更高...什麼給了？ – fideldonson

CSS的這個片段會從你的文本框，刪除默認的WebKit造型：

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

適用於iOS 7了。

來源

2013-12-03 11:02:01 crmpicco

爲什麼輸入框在Ipad上顯示如此不同，但不在鉻上

回答

相關問題