trường ngày hiển thị không chính xác trên iPhone

Question

Trên tab Chỗ ở là this page, có một số trường ngày sử dụng this datepicker. Tất cả mọi thứ hoạt động tốt trên trình duyệt máy tính để bàn, nhưng khi trang web được xem trên một chiếc iPhone ngày được hiển thị bên dưới các lĩnh vực:

Ngẫu nhiên, tôi đã cố gắng nâng cấp từ dòng datepicker (phản đối) để this newer version, nhưng nó không thành công.

Answer 1

Thử CSS:

#booking label { width: 100% } 

hoặc một cái gì đó như thế với tham số width hoặc có thể:

#booking label { display: block; } 

Answer 2

Tôi nhìn một chút thông qua mã và tôi phát hiện ra rằng một tuyên bố tại một trong những css bao gồm là những gì gây ra vấn đề. Bạn dường như hợp nhất tất cả kiểu của bạn để tôi không biết chính xác kiểu nào (kiểu datepicker.css?), Dù sao, khai báo

.datepicker:before{content:''; display:inline-block;} 

Điều gì gây ra vấn đề. Tôi không biết chính xác mục đích của điều đó trong chương trình lớn, nhưng chỉ xóa tuyên bố hoặc thay đổi loại display từ inline-block thành block, làm cho mọi thứ đều ổn.

Cố gắng điều tra bắt đầu từ đó, tránh để phá vỡ phong cách cho các trình duyệt khác đã làm việc, và hiểu ý nghĩa của những inline-block, kể từ khi họ đang hiện diện trong cả hai .datepicker:before và .datepicker:after

Answer 3

Thay vì sử dụng một bên thứ ba datepicker, có thể kể từ khi iOS 5 sử dụng công cụ datepicker gốc:

<input type="date"> 

Cũng có thể check if the browser supports input type="date". Bạn có thể sử dụng giải pháp gốc của trình duyệt, nếu có, và sử dụng trình ghi ngày tháng của bên thứ ba làm dự phòng.