Chiều rộng 100% khi nhập loại đầu vào so với văn bản loại đầu vào

Question

Tôi có biểu mẫu đăng nhập được tạo kiểu để có hộp văn bản và nút gửi được kéo dài tới 100% kích thước vùng chứa. Đây là bố cục di động dạng lỏng, nhưng ví dụ jsbin của tôi bên dưới có kích thước vùng chứa cố định cho mục đích trình diễn.

http://jsbin.com/ozutoq/9

Trong IE7, IE8, FF 4, Safari - tất cả làm cho nút ngắn hơn một chút textbox nộp. Công cụ bố cục của Firebug hiển thị các hộp văn bản rộng 500px, nhưng nút gửi ở chiều rộng 498px. Trong ví dụ thực sự của tôi nút gửi là 6px skinnier. Làm thế nào tôi có thể sửa lỗi này để nó chiếm toàn bộ chiều rộng?

Cập nhật

tôi đã làm thử nghiệm khác bằng cách thiết lập một chiều rộng cố định trên đầu vào. Dường như nút gửi không tuân theo mô hình hộp. Tôi đã sử dụng chiều rộng 100px và hiển thị đường viền 98px + 2px, trong khi hộp văn bản hiển thị chiều rộng 100px + 2px cho đường viền.

Vì vậy, tôi đoán câu hỏi là làm thế nào tôi có thể giải quyết vấn đề này trong bố cục linh hoạt? -1px phải và trái padding trên các nút không có vẻ làm việc, và thiết kế các cuộc gọi cho một biên giới 1px trên nút! Tôi có phải nghỉ dưỡng với js không?

Answer 1

Đối với một số lý do mozilla đặt đầu vào của các loại văn bản để -moz-box-sizing:content-box; nhưng nút gửi được thiết lập để -moz-box-sizing:border-box;

Thiết sau đây sẽ cung cấp cho bạn vẽ dự định trong FF.

.login-tb { 
    border:1px solid red; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    margin: 0; 
    padding: 0; 
    width:100%; 
} 

Cập nhật: Added Safari và IE8 + hỗ trợ

Answer 2

Thật là kỳ lạ. Tôi nghĩ rằng biên giới 1px được thêm vào bên ngoài của văn bản đầu vào của bạn vì vậy nó là 500px rộng.

Trong khi vào nút Submit nút được tính ở hai bên nhưng hiển thị trên bên trong, vì vậy bạn sẽ có được 500px - 1px - 1px = 498px rộng ...

Một giải pháp khả thi mà bạn có thể làm là chỉ cần tạo CSS sau đây:

.login-tb { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
} 

#login-tb { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
    width: 502px; 
} 

Điều đó khắc phục sự cố của bạn và nó vẫn hiển thị nút gửi của bạn rộng 500px trong Firebug. Và như hình thức của bạn được thiết lập để chiều rộng 500px anyway và điều này không thay đổi, không có nhiều sử dụng trong việc thực hiện một chiều rộng thiết lập trong một tỷ lệ phần trăm.

Answer 3

Tôi tin rằng đó là cách trình duyệt tính toán thứ nguyên [loại = gửi] đầu vào. Tôi đã thử áp dụng một số reset nhưng những người dường như không làm việc hoặc. Tôi đang sử dụng Macbook Air với Chrome và trên ví dụ JSBin của bạn, bản xem trước thời gian thực trông ổn nhưng "Render" đã xác thực vấn đề của bạn.

Tôi đã thử jsfiddle.net và nó cho thấy cùng một vấn đề. Đây là một giải pháp nếu điều này sẽ bay cho ứng dụng của bạn.Đơn giản chỉ cần loại bỏ các biên giới và nền từ nút gửi và phong cách wrapper div thay vào đó, sau đó đưa người nghe nhấp chuột trên div gửi biểu mẫu:

CSS:

form { 
    width: 500px; 
    padding:0; 
    margin:0; 
} 
form div, form div input { 
    height:20px; 
    margin-bottom:4px; 
} 
input[type=text] { 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
} 
#submit input{ 
    background:transparent; 
    margin:auto; 
    border:none; 
} 
#submit{ 
    text-align:center; 
    background-color:#CCC; 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
    cursor:pointer; 
} 

jQuery:

$('#submit').click(function(){ 
    $('#login').submit(); 
}); 

$('#login').submit(function(){ 
    alert('form submitted'); 
    return false; 
}); 

http://jsfiddle.net/pZcx4/

THAY THẾ JS NATIVE:

function submit_form() 
{ 
    alert('form submitted'); 
    return false; 

    // when you are ready, do this: document.forms['login'].submit(); 
} 


document.getElementById('submit').addEventListener('click',submit_form,false); 

http://jsfiddle.net/pZcx4/3/

Answer 4

Không chắc chắn điều này sẽ làm việc cho môi trường của bạn. Khi tôi chơi với jsbin, điều chỉnh width làm việc ...

.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }

Tested chỉ trên Chrome.