爲什麼border-radius在MobileSafari中的文本輸入上不能正常工作？

這裏是一個參考HTML文檔：爲什麼border-radius在MobileSafari中的文本輸入上不能正常工作？

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
body { background-color: #000; } 
input { -webkit-border-radius: 20px; } 
    </style> 
    </head> 
    <body> 
     <input type="text" value="text" /> 
    </body> 
</html>

的border-radius使得在Safari /基於WebKit的桌面瀏覽器很好，但對「MobileSafari」變種，即iPhone和iPad的瀏覽器，它有這個奇怪的盒子呈現，當輸入顯示在不同顏色背景的頂部時，這破壞了圓角的錯覺。來自網絡的

http://cl.ly/1LUi/content

來源

2010-06-10 Abraham Vegh

共識是，這是在WebKit的iOS版的bug。請勿在iPhone上使用textinput s上的border-radius。

來源

2010-06-10 21:30:32

是的，這是一個錯誤，但有一個解決方法。看到我上面的答案。 – KevBurnsJr 2011-07-27 22:39:41

你有沒有考慮用帶邊界半徑的span/div/other容器來包裝textfield？

<style> 
    body { background-color: #000; } 
    .inputWrapper { -webkit-border-radius: 20px; } 
</style>

...

<body> 
    <div class="inputWrapper"><input type="text" value="text" /></div> 
</body>

來源

2010-06-11 02:55:16

我沒有看到在我的網站上的這個問題，我使用8像素的-webkit-邊界半徑與在分配的背景圖像身體風格。我的輸入框中也有這種樣式：

-webkit-box-shadow：0px 5px 10px rgba（0,0,0,0.5）;

雖然圓角顯示得很好，但是在移動Safari瀏覽器中，根本不會顯示框陰影，即使在桌面Safari瀏覽器中顯示效果也不錯。也許有-webkit-box-shadow風格允許radius指示符工作？你可以試試看，因爲它適合我。

您也可以嘗試使用單獨的邊框樣式：

-webkit-邊框左上角的半徑 -webkit-邊框右上角半徑 -webkit-下邊框，左半徑 -webkit-border-bottom-right-radius

當我使用-webkit-border-radius作爲選擇框時，它在移動Safari中沒有正確顯示（再次桌面版本很好）。當我改變使用個人風格設置，那麼它工作正常。

來源

2010-08-10 23:34:03 imagimotion

我很確定我也試過，當我遇到這個問題時。 – 2010-08-12 15:07:39

我設法通過減少邊界半徑來解決這個問題。

這個錯誤似乎只在邊界半徑大於元素高度的一半時纔出現。

因此，如果-webkit-border-radius：20px;確保你的元素至少有40個像素高。

否則邊框背景重疊會導致可怕的醜陋。

來源

2011-03-09 05:59:08 KevBurnsJr

謝謝，這對我有用！ – 2011-04-21 05:52:37

KevBurnsJr：你真棒，謝謝。我玩了一段時間，無法讓它們在iPad上看起來很正確。儘管你的解決方案是完全合理的，但是，如果兩個角都超過高度的一半，那麼半徑重疊。無論是iOS渲染這些與Safari不同的錯誤，我都不確定，也許不那麼直觀，但是看起來iOS對這種特殊情況更爲嚴格。感謝您發佈該筆記，我可以轉移到其他iPad問題上。 ;） – 2011-05-10 04:49:01

謝謝你的回答，非常幫助。我只想補充一點，這是iOS 5之前的一個問題。所以我們不能懶惰使用我們的'border-radius'我想。 – sic1 2012-07-19 19:01:16

你怎麼把輸入{-webkit-border-radius：20px;概要：0; } 查看結果.. :)

來源

2013-03-31 12:36:10 shafiq

爲什麼border-radius在MobileSafari中的文本輸入上不能正常工作？

回答

相關問題