Tại sao bán kính biên giới không hoạt động đúng trên đầu vào văn bản trong MobileSafari?

Đây là một tài liệu tham khảo HTML:Tại sao bán kính biên giới không hoạt động đúng trên đầu vào văn bản trong 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>

Các border-radius ám tốt trên Safari/WebKit dựa trên trình duyệt máy tính để bàn, nhưng trên "MobileSafari" biến thể, cụ thể là trình duyệt iPhone và iPad, nó ám với hộp kỳ lạ này , phá hủy ảo ảnh của các góc tròn khi đầu vào đang được hiển thị trên nền màu khác.

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

Nguồn

2010-06-10 Abraham Vegh

Đồng thuận từ khắp nơi trên web là rằng đây là một lỗi trong WebKit dành cho iOS. Không sử dụng border-radius trên textinput giây trên iPhone.

Nguồn

2010-06-10 21:30:32

Có lỗi, nhưng có một giải pháp thay thế. Xem câu trả lời của tôi ở trên. – KevBurnsJr

Bạn đã cân nhắc việc bao quanh trường văn bản với một khoảng/div/vùng chứa khác có bán kính đường viền không?

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

...

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

Nguồn

2010-06-11 02:55:16

Tôi không nhìn thấy vấn đề này vào trang web của tôi, và tôi đang sử dụng -webkit-border-radius của 8px với một hình ảnh nền được gán trong phong cách cơ thể. Tôi cũng có kiểu này cho hộp nhập liệu của mình:

-webkit-box-shadow: 0px 5px 10px rgba (0,0,0,0,5);

Mặc dù các góc tròn được hiển thị tốt, bóng hộp không hiển thị ở tất cả trên safari di động, mặc dù nó hiển thị tốt trên safari máy tính để bàn. Có thể có phong cách -webkit-box-shadow cho phép người thiết kế bán kính hoạt động? Bạn có thể thử nó vì nó làm việc cho tôi.

Bạn cũng có thể thử sử dụng các kiểu viền cá nhân của:

-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-trái bán kính -webkit-border-bottom-right-radius

Khi tôi sử dụng bán kính-bán kính-biên giới cho một hộp chọn, nó không hiển thị ngay trong safari di động (một lần nữa phiên bản máy tính để bàn là tốt). Khi tôi thay đổi để sử dụng các thiết lập phong cách cá nhân, sau đó nó làm việc tốt.

Nguồn

2010-08-10 23:34:03 imagimotion

Tôi khá chắc chắn tôi cũng đã thử điều đó, khi tôi gặp vấn đề này. –

Tôi đã cố gắng khắc phục điều này bằng cách giảm bán kính đường viền.

Lỗi này dường như chỉ xuất hiện nếu bán kính đường viền lớn hơn một nửa chiều cao của phần tử.

Vì vậy, nếu -webkit-border-radius: 20px; đảm bảo yếu tố của bạn cao tối thiểu 40 pixel.

Nếu không, hình nền đường viền sẽ chồng lên nhau gây ra uglybox đáng sợ.

Nguồn

2011-03-09 05:59:08 KevBurnsJr

Cảm ơn, điều này đã làm việc cho tôi! –

KevBurnsJr: Bạn là người đàn ông tuyệt vời, cảm ơn. Tôi chơi với điều này một lúc, và không thể khiến họ nhìn ngay trên iPad. giải pháp của bạn hoàn toàn có ý nghĩa tuy nhiên, vì nó là toán học, nếu cả hai góc vượt quá một nửa chiều cao, sau đó sự chồng chéo bán kính. Cho dù đó là một lỗi mà iOS ám những khác biệt so với Safari, tôi không chắc chắn, có lẽ ít trực quan hơn, nhưng có vẻ như iOS chỉ nghiêm ngặt hơn với trường hợp cụ thể này. Cảm ơn bạn đã đăng ghi chú, tôi có thể chuyển sang các sự cố iPad khác của mình. ;) –

Cảm ơn bạn đã trả lời câu hỏi này, đã giúp rất nhiều. Tôi chỉ muốn thêm vào, đây là một vấn đề với trước iOS 5. Vì vậy, chúng tôi không thể lười biếng với 'border-radius' của tôi. – sic1

cách bạn đặt đầu vào {-webkit-border-radius: 20px; phác thảo: 0; } xem kết quả .. :)

Nguồn

2013-03-31 12:36:10 shafiq

Tại sao bán kính biên giới không hoạt động đúng trên đầu vào văn bản trong MobileSafari?

Trả lời

Các vấn đề liên quan