<input type =「submit」> Safari移動的填充錯誤？

（這類似於（也未回答的）問題#3430506，而是適用於輸入標籤而不是HTML5元素。）<input type =「submit」> Safari移動的填充錯誤？

在< INPUT TYPE = 「提交」 >按鍵，iPhone /移動Safari瀏覽器增加填充到左側和右側。這不會發生在桌面版上，也不會發生在我嘗試過的任何其他移動/桌面Webkit瀏覽器上。它似乎將字體大小以px添加到每一邊（即，14px字體意味着總寬度是14px +文本寬度+ 14px）。

目前我正在嘗試以下將其刪除：

/* webkit user-agent stylesheet uses input[type="submit"] */ 

form input[type="submit"] { /* more specific to override webkit */ 
    -webkit-appearance:none; 
    -webkit-border-radius:0px; 
    margin:0; 
    padding:0; 
    border:0; 
    display:block; 
}

我見過很多的關於使用-webkit-外觀迴應：無......這沒什麼區別。也沒有刪除圓角。我做了一個頁面來演示桌面版本如何呈現各種-webkit外觀對象;都有-webkit-border-radius：0並應用上面的代碼。

嘗試在桌面上的Safari瀏覽這些那麼iPhone：
http://deleri.com/test.html

（Safari的手機屏幕截圖對那些沒有iPhone :)
deleri.com/safari.png

雖然我很樂意知道爲什麼會發生這個錯誤，現在我更關心修復它。我試過每種類型的display/overflow/box-sizing/-webkit-anything-/width：auto/text-indent選項，並且無法通過手動設置寬度來修復它（最終寬度需要百分比 - 基於，而奇怪的填充仍然適用）。我開始懷疑它是否是一些不明確的屬性，或者用戶代理樣式表沒有被覆蓋。有什麼想法嗎？

來源

2010-08-18 pixi

如果您嘗試將填充值設置爲一個巨大的值（例如100px），您會注意到在移動Safari中，頂部和底部填充增加，而左側和右側再次保持默認值。所以我認爲可以很簡單地認爲這很簡單就算是iOS的webkit例程中的一個bug，除非Apple解決了這個問題，否則就沒有直接的解決方案。

解決方法是創建一個看起來像你想要的DIV，並添加一個提交表單的onclick處理程序。不需要使用真正的提交按鈕。

來源

2010-08-24 10:21:33

我最終使用直接鏈接與JS處理程序提交onClick ...它可能無法在最終版本中工作，但它是一個很好的臨時修復。謝謝！（手指交叉，蘋果很快就修復了這個bug。） – pixi 2010-08-27 18:34:55

這可能是一個愚蠢的建議，但如果問題是

<input type="submit" />

你能嘗試改變它

<button type="submit" />

哪個做同樣的事情，但可能不會有錯誤嗎？

來源

2010-08-23 13:31:28 hellweaver666

感謝您的建議，但不幸的是它是相同的錯誤;請參閱上面鏈接的問題＃3430506。 – pixi 2010-08-24 05:51:45

你對錶格有控制嗎？又名：你是否手動輸入表格？

如果這樣加任何一個ID或類標籤將其

<input type="submit" id="submit" value="submit">

然後調整CSS來

form input #submit { /* more specific to override webkit */ 
    -webkit-appearance:none; 
    -webkit-border-radius:0px; 
    margin:0; 
    padding:0; 
    border:0; 
    display:block; 
}

來源

2010-08-26 22:03:29 canintex

我確實擁有對錶單的控制權，並且在樣式化時嘗試了ID和類的組合;既沒有工作。（使其儘可能具體，但沒有運氣。） – pixi 2010-08-27 18:33:41

按鈕的value屬性內的文本已關閉，因此我只添加了-webkit-appearance：none，現在它居中，但-webkit-border-radius不再有效，而我那裏有一個圓形的按鈕。無論如何，我投了這個原因一個方形按鈕比我只有一半的文本上舍入按鈕更好。謝謝！ – Raul 2014-02-09 11:07:47

@Andrei將'-webkit-border-radius：0px'更改爲'-webkit-border-radius：5px'，你應該得到一個帶有5px圓角的按鈕。 – canintex 2014-12-03 19:47:31

我今天就遇到了這個錯誤，當我的媽媽告訴我，一個頁面我有在她舊iPhone 3G上丟失了文字。果然，我解僱了我妻子的舊3G，我們躺在抽屜裏的某個地方，我的一個按鈕上的文字被推到一邊，因爲Safari正在插入一些巨大的間距。

好消息是，在最新的更新（不知道到底是什麼，但我有更新的iPhone 4），這個bug已經修復。

壞消息是，如果用戶不更新他們的瀏覽器，除了不使用標籤之外，我無法找到任何方法。

我現在的建議是檢查Mobile Safari的版本。如果他們正在運行最新版本（或者更新版本修復了此錯誤或更高版本），他們會使用該按鈕獲取頁面。如果沒有，他們可以使用替代標籤來製作按鈕。在我的頁面上，這看起來不太好，而且有點尷尬，但我已經根據移動或桌面版本的網站檢查瀏覽器，所以這不算太多。

希望這會有所幫助。

來源

2011-02-21 06:50:47 Isaac

我有一個類似的問題，我注意到我的問題已經解決，當我將背景設置爲漸變而不是簡單的背景顏色。

這在某種程度上只是忽略了填充值

#submit{ 
    background:#a0b9dc; 
    padding:9px 35px; 
}

下面的代碼解決了填充問題，我在提交按鈕。

#submit{ 
    background:#a0b9dc; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A0B9DC)); 
    background: -o-linear-gradient(bottom, #A0B9DC 0%); 
    background: -moz-linear-gradient(bottom, #A0B9DC 0%); 
    background: -webkit-linear-gradient(bottom, #A0B9DC 0%); 
    background: -ms-linear-gradient(bottom, #A0B9DC 0%); 
    background: linear-gradient(to bottom, #A0B9DC 0%); 
    padding:9px 35px; 
}

來源

2013-11-19 17:59:04

是的，但可以使用邊界半徑，但仍然是一個體面的修復 – Raul 2014-02-09 11:12:54

<input type =「submit」> Safari移動的填充錯誤？

回答

相關問題