CSS: Nút gửi trông nhỏ hơn so với nhập văn bản và textarea

Question

Tôi vừa nhận thấy kết xuất lạ này có dạng rất đơn giản.

Dưới đây là đánh dấu của tôi/CSS: http://jsfiddle.net/a9PLM/

Như bạn có thể thấy, các lĩnh vực văn bản và nút chia sẻ phong cách tương tự nhưng kích thước của chúng là khá khác nhau.

Tại sao điều này lại xảy ra?

Cảm ơn!

Answer 1

Điều này là do mô hình hộp được sử dụng khác nhau đối với <input type="submit"> và <input type="text">/<textarea>. Bạn có thể làm cho các mô hình hộp giống nhau bằng cách xác định chúng bằng CSS:

box-sizing: border-box; 
-moz-box-sizing: border-box; 

Bạn có thể đọc thêm về mô hình hộp ở đây: http://www.quirksmode.org/css/box.html

tôi sửa jsFiddle của bạn để hiển thị nó làm việc: jsFiddle demo

Answer 2

Đệm trên các trường văn bản cung cấp thêm không gian ở hai bên. Đặt phần đệm đầu vào và văn bản thành 0.

Answer 3

Tôi nghĩ đây là sự cố hiển thị trình duyệt ... với các nút được hiển thị khác với đầu vào văn bản.

Để khắc phục, thêm video này vào css của bạn

form input[type="submit"]{ 
    width:273px; 
} 

Ví dụ:http://jsfiddle.net/jasongennaro/a9PLM/1/

Answer 4

Vấn đề là rằng các bộ phận hình thức thường không được trả lại như các yếu tố HTML bình thường, và tạo kiểu cho chúng luôn luôn là một là bit hit-or-miss. Tôi sẽ cố gắng tránh một trường hợp như thế này đòi hỏi phải có kích thước chính xác, nhưng nếu bạn không thể, sau đó chia selectors như thế này:

form textarea, form input[type=text] 
    { 
     width:250px; 
     padding:10px; 
    } 
    form input[type=submit] { width: 270px } 

Lưu ý rằng tôi đã thêm 20 px (10 x 2) với chiều rộng để bồi thường cho đệm.

Answer 5

tôi đã sử dụng giải pháp chỉ CSS này hoạt động trong IE, FF và Chrome. Về cơ bản, ý tưởng là tự buộc chiều cao của các yếu tố đầu vào với các giá trị lớn hơn các hộp tiêu chuẩn. Làm điều này cho cả văn bản và nút:

• Set margins and padding để 0.
• Đặt vertical-align đến giữa.
• Sử dụng chiều cao/chiều rộng để kiểm soát thứ nguyên văn bản và nút. Chiều cao văn bản phải cao hơn một vài pixel so với chiều cao phông chữ (để ghi đè kích thước hộp tiêu chuẩn). Chiều cao của nút phải lớn hơn 2 pixel so với văn bản.

Ví dụ:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; } 
input[type="submit"] { height:32px; }