Các trường mẫu khởi động Twitter quá nhỏ

Question

Tôi biết chủ đề này "nghe" rất giống với những chủ đề khác nhưng tôi đã xem qua tất cả các chủ đề hiện có (cũng "hầu hết") và tôi vẫn gặp vấn đề tôi có thể sử dụng giúp đỡ về ...

các vấn đề là không quá khác mấy so với những gì người khác đã mô tả:

• Một số yếu tố MẪU không hiển thị đầy đủ chiều cao thẳng đứng của họ
• đáng chú ý nhất trong số này là các loại đầu vào trông giống như thiếu kích thước khi ngồi bên cạnh nút hoặc "add-on" class
• Gần đây, tôi nhận thấy một vấn đề thậm chí còn nghiêm trọng hơn ... các nút radio trở thành "các chấm vô tuyến" vì chúng quá nhỏ nên chúng hầu như không nhìn thấy được.

Bây giờ rất nhiều người giải quyết vấn đề của họ bằng cách đảm bảo họ xác định các DOCTYPE đúng ở phía trên cùng của tài liệu HTML của họ. Tôi cũng thấy rằng điều chỉnh đơn giản này đã làm các trick trên giả HTML tĩnh của tôi-up. Đáng buồn thay khi tôi chuyển sang Wordpress, vấn đề xuất hiện trở lại và tôi chắc chắn đã đặt chữ ký HTML 5 DOCTYPE ở đầu đầu ra (tôi đã kiểm tra điều này nhiều lần với "view source"). lí trí).

Tôi đã bao gồm ảnh chụp nhanh màn hình trong trường hợp điều này giúp làm sáng tỏ điều này. Bạn có thể tìm thấy ở đây: http://www.flickr.com/photos/14261777@N00/6957941282/. Lưu ý các chấm nhỏ nhỏ ở phía dưới được cho là nút radio. Rõ ràng hơn là các trường INPUT không đủ cao. Oh, và cũng cho tính đầy đủ, đây là ảnh chụp màn hình về cách nguồn HTML của tôi bắt đầu: http://www.flickr.com/photos/14261777@N00/6957952802/.

Tôi rất muốn nghe ý kiến ​​của bất kỳ ai có lý do tại sao điều này có thể xảy ra và mọi giải pháp có thể tồn tại (ngay cả khi nguồn của giải pháp chưa được biết). Tôi đã thử áp đặt các thuộc tính CSS như chiều cao dòng, chiều cao, chiều cao tối thiểu, v.v ... và một số thuộc tính khác có hiệu ứng bằng 0.

Answer 1

Có vẻ như bạn có hai vấn đề. Vấn đề input type=text và sự cố với nút radio. Nếu không nhìn thấy mã của bạn, có vẻ như vấn đề hộp văn bản của bạn có liên quan đến DOCTYPE và sự cố nút radio của bạn liên quan đến các kiểu CSS ghi đè (có thể xác nhận nếu bạn đăng đầu ra thanh tra cho các nút radio).

Nếu biến của bạn được hiển thị dưới dạng giá trị chính xác (ví dụ chiều cao 18px), chúng là số nguyên thì chắc chắn nhất là sự cố DOCTYPE.

Từ this article trên A List Apart:

Bạn đã làm tất cả những thứ đúng, nhưng trang web của bạn không giống hoặc làm việc như nó nên trong các trình duyệt mới nhất.

Bạn đã viết XHTML và CSS hợp lệ. Bạn đã sử dụng tiêu chuẩn W3C Mô hình đối tượng tài liệu (DOM) để thao tác các yếu tố trang động. Tuy nhiên, trong các trình duyệt được thiết kế để hỗ trợ các tiêu chuẩn này, trang web của bạn là không thành công. Một DOCTYPE bị lỗi có khả năng đổ lỗi.

Bài viết nhỏ này sẽ cung cấp cho bạn DOCTYPE hoạt động và giải thích hiệu ứng thực tế, thực tế của các thẻ dường như trừu tượng này.

Dưới đây là danh sách đề nghị của doctypes theo W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Answer 2

Nếu có ai quan tâm, đây là những gì tôi đã thêm để sửa chữa các vấn đề:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input { 
    padding: 4px; 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    border-bottom-color: #CCC; 
    border-left-width: 1px; 
    border-left-style: solid; 
    border-left-color: #CCC; 
    border-right-width: 1px; 
    border-right-style: solid; 
    border-right-color: #CCC; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: #CCC; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
} 

.input-append .add-on, .input-append .btn { 
    margin-left: -6px; 
} 

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