Thêm đệm 2px của Firefox vào nút gửi

Question

Xin chào, tôi dường như đang gặp phải một số sự cố với Firefox khi thêm 2 pixel đệm vào nút gửi. Tôi đã thử nghiệm tính năng này trong chrome và IE9 và cả hai trình duyệt đều hiển thị mã ok. được thêm 2 điểm ảnh đệm ở phía dưới để vào nút gửi với nền chính ở phía trên bên phải corner.Here là trang web:

www.thanathos.host22.com

Đây là mã cho trang web:

<form method="post" action="index.html"> 
       <input type="text" value="Username"/> 
       <input type="text" value="Password"/> 
       <input type="submit" id="submit" value=""/> 
       <img src="img/header/key.png" alt="" id="key"/> 
     </form> 

    header section form input{ 
     color:#b3aaaa; 
     border:1px solid #cccccc; 
     float: left; 
     padding:5px 8px; 
     margin-left: 6px; 
    } 

Tôi làm cách nào để sửa lỗi này?

Nếu không có giải pháp cho việc này, bất cứ ai có thể vui lòng cung cấp cho tôi giải pháp trong phù thủy văn bản đầu vào bằng với gửi đầu vào và văn bản nhập liệu ở giữa từ trên xuống không?

EDIT: Tôi đã kiểm tra này trong một máy tính khác và có vẻ như Firefox làm cho này một cách chính xác tôi đã gặp phải vấn đề kiểu này trước đó các phiên bản trình duyệt cùng cho thấy một trang web một chút khác nhau trên máy tính khác nhau Một thời gian ngắn tương tự xảy ra trong chrome.I không bao giờ có thể giải quyết vấn đề này.

Bất kỳ ai biết tại sao cùng một trình duyệt sẽ hiển thị một trang khác nhau trên các máy tính khác nhau có cùng kích thước và độ phân giải màn hình?

Answer 1

Tôi gặp sự cố như thế này.sau đó tôi tìm thấy CSS thingy này mà giải quyết vấn đề:

input::-moz-focus-inner { border:0; padding:0 } 

Giải pháp này đã được đưa ra trong một chú thích trong bài viết trên blog này:

Bulletproof CSS input button heights

Khi bài nói: điều này xảy ra bởi vì Firefox (Thành viên Đại lý) sở hữu CSS cách sử dụng theo phong cách !important và mọi thứ cố gắng thực hiện để ghi đè thuộc tính CSS sẽ không được áp dụng.

Answer 2

** Tôi rời này ở đây vì tôi nghĩ đó là anywhoo hữu ích .. **

trong cả hai trường hợp thử truy cập chỉ vào nút và chơi xung quanh với css cho nó:

input[type="submit"] { 
    padding-bottom: 3px; 
} 

EDIT

Được rồi vì vậy có vấn đề với giải pháp của bạn, vì bạn định vị hình ảnh phía trên nút, bạn sẽ khó thực sự nhấp vào nút gửi hơn. Nếu bạn di chuột qua phím, bạn sẽ thấy rằng nó không thay đổi thành con trỏ = không thể nhấp được.

Tôi khuyên bạn nên xóa thẻ hình ảnh và thay vào đó sử dụng thẻ làm nền trong nút gửi của bạn. Một cái gì đó như thế này:

input[type="submit"] { 
    padding-bottom: 3px; 
    background: url(path-to-image); 
    border: none; 
    height: "img-height"; 
    width: "img-width"; 
} 

Nếu kích thước của hình ảnh là chính xác, cũng vì bạn dường như có một số loại nền trong nút gửi allready. Id đi với làm cho một hình ảnh đó là kích thước chính xác trong đó có cả nền và hình ảnh quan trọng (Tôi hy vọng câu cuối cùng này làm cho một số sence).

Một vấn đề khác có thể là bạn không có văn bản trong nút của bạn, tuy nhiên nút nên kế thừa kích thước lineheight/font từ trước đó trong css và do đó có thể mở rộng nút gửi thêm. Hãy thử thêm thứ gì đó như cỡ chữ: 1px hoặc gì đó.