IE 8 di chuyển văn bản của nút đầu vào khi được nhấp vào

Question

<input type="button" value="Button" /> 

IE indents văn bản xuống và hơn 1px khi nút được nhấp theo mặc định. Có cách nào để ngăn chặn điều này với chỉ CSS không?

Tôi cũng thêm kiểu của riêng mình vào nút này và mọi thứ đều tuyệt vời cho đến khi tôi nhấp vào văn bản trong nút ... IE có vẻ bỏ qua trạng thái hoạt động được xác định trong biểu định kiểu của tôi. Nhưng nếu tôi nhấp vào nút và không phải là văn bản, IE sẽ thực hiện: trạng thái hoạt động. Tất nhiên vấn đề di chuyển văn bản vẫn còn hiện diện bất kể tôi làm gì.

Bất kỳ ý tưởng nào?

Answer 1

Nếu bạn sử dụng thẻ A theo kiểu, bạn sẽ nhận được toàn bộ vấn đề trạng thái "được nhấn" hoàn toàn này. Sử dụng display:block và một số CSS, bạn có thể tạo kiểu cho thẻ A để trông giống hệt như bất kỳ nút nào.

Answer 2

Tôi không biết bạn đang sử dụng phiên bản IE nào, nhưng hãy thử Button background shift Ngoài ra, hãy xem Remove 3D push effect on button, cụ thể là câu trả lời từ allicarn, thay đổi phần đệm từ phần tử thành: active. Chỉ cần nhớ đặt css trong các trường hợp cụ thể của IE, như khối IF.

Answer 3

Được rồi, vì vậy, tôi đã gặp phải vấn đề tương tự và tôi đã phát hiện một giải pháp phù hợp với tất cả các trình duyệt.

Tôi có hai nút biểu mẫu mà tôi đã thay đổi đường viền, họ phông chữ và kích thước và đệm trên. Khi tôi nhấp vào chúng trong IE, chúng sẽ "nhảy" vì IE là ngu ngốc theo ý kiến ​​của tôi. Tất cả các trình duyệt khác dường như tạo kiểu cho nút chính xác và không có một vấn đề hiển thị với các nút di chuyển khi người dùng nhấp họ ..

Các giải pháp tôi tìm thấy là:

Phong cách các nút hình thức sao cho mỗi người trong số họ có một lề bằng nhau và áp dụng một bộ phận bao bọc với một vị trí hoặc lề sẽ bù đắp theo ý thích của bạn.

#myButton { 
     font-family: Times New Roman; 
     font-size: 16pt; 
     border: 2px solid #f7f6f4; 
     margin: 20px; 
     padding:15px; 
    } 



    <div style="float:right;margin-right:75px;"> 
     <input type="submit" name="myButton" id="myButton" value="Don't Jump!" /> 
    </div>