Hộp kiểm không hiển thị Chrome - Làm việc trong các trình duyệt khác

Question

Tôi không chắc chắn những gì đang diễn ra. Nên có một hộp kiểm bên trái của "Remember Me" và hai kiểm tra ở phía dưới cho tôi có một chiếc xe đạp, tôi có một chiếc xe hơi. Chúng hiển thị trong Firefox nhưng không hiển thị trong Chrome. Tôi tin rằng tôi có một vấn đề CSS nhưng không thể tìm thấy nó? Có ai giúp đuợc không?

http://www.cloudtute.com/auth

Answer 1

Dòng này trong CSS của bạn:

-webkit-appearance: none; 

Trong quy tắc phong cách cho input, button, select, textarea đang phá vỡ mọi thứ cho bạn.

Answer 2

Bạn đã xác định các quy tắc phong cách:

-webkit-appearance: none; 

định nghĩa cho input, button, select, textarea, bạn phải gỡ bỏ nó và sẽ làm việc.

Bạn cũng có lỗi JS trong bảng điều khiển: Uncaught ReferenceError: containerz is not defined, hãy kiểm tra.

Answer 3

Tôi đang trả lời ở cấp độ rộng hơn cho những người đang gặp sự cố về hộp kiểm này không hiển thị trong Chrome. Và được hướng dẫn ở đây bởi google. Bạn cũng có thể gặp sự cố này trong Safari vì cả hai hiện đang sử dụng WebKit.

Chúng tôi đã gặp sự cố này trên trang web của riêng chúng tôi, nơi các hộp kiểm và đầu vào radio không hiển thị chính xác. Nhưng đã sửa nó bằng cách thêm vào CSS của chúng tôi.

input[type=checkbox] 
{ 
    -webkit-appearance:checkbox; 
} 

Bây giờ nó hoạt động tốt.

Như bạn có thể thấy, nhà phát triển khác đã thêm -webkit-appearance: none; giống như trong trường hợp của bạn. Trong trường hợp của chúng tôi, đó là vì tôi đã bắt đầu với một chủ đề.

Nhưng để đảm bảo rằng các đầu vào hiển thị, bạn chỉ cần khai báo các quy tắc đó trong CSS của mình là an toàn. Trong trang này, tôi đã đặt các kiểu trong thẻ <style> (mà tôi không khuyên dùng) nhưng tôi đã chụp ảnh màn hình khi tôi vẫn đang thử nghiệm. Thực hành tốt hơn là xóa các kiểu xung đột và thêm kiểu trong thư mục thích hợp.

Tài nguyên bổ sung:
https://css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
What is WebKit and how is it related to CSS?

Answer 4

Nếu bạn cung cấp cho chiều rộng 0px để một hộp kiểm trong Firefox, bạn sẽ có thể nhìn thấy nó nhưng nếu bạn mở cùng mã trong Chrome, hộp kiểm sẽ ẩn.

Answer 5

Tôi gặp vấn đề tương tự. Khi tôi tắt tiện ích mở rộng Chặn quảng cáo, nó đã hoạt động!

Sau đó, tôi đã thêm ngoại lệ vào trang web này trong Chặn quảng cáo.

Answer 6

Thiết lập giá trị của hộp kiểm để thực làm việc cho tôi

value="true"