Trình giữ chỗ nhập văn bản không hiển thị trong IE và Firefox

Question

Trình giữ chỗ nhập văn bản của tôi từ chối hiển thị trong IE và Firefox mặc dù đã sử dụng thuộc tính giữ chỗ -moz. Điều này có thể được xem on the contact page here nếu bạn đang sử dụng Firefox hoặc IE.

Ai đó có thể vui lòng giúp tôi đã cố gắng tìm hiểu điều này trong nhiều tuần. Mẫu mã của tôi dưới đây:

input::-moz-placeholder, textarea::-moz-placeholder { 
    color: #aaa; 
    font-size: 18px; 
} 

    input:-ms-input-placeholder, textarea::-ms-input-placeholder { 
     color: #aaa; 
     font-size: 18px; 
    } 

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color: #aaa; 
    font-size: 18px; 
} 

Answer 1

Như luke2012 tuyên bố điều này xảy ra khi box-sizing: border-box; đang được sử dụng trên các lĩnh vực input type văn bản. Tuy nhiên điều này chỉ xảy ra khi một chiều cao cố định đang được sử dụng (chẳng hạn như trong khung Bootstrap) và có quá nhiều đệm trên và dưới. Không chỉ ngăn văn bản giữ chỗ hiển thị mà còn có thể nhập văn bản cũng như trong Firefox.

Tôi thấy rằng giải pháp tốt hơn là giữ box-sizing: border-box; và thay vào đó loại bỏ phần đệm trên cùng và dưới cùng và tăng chiều cao lên tổng chiều cao mà bạn muốn trường đầu vào có (bao gồm bất kỳ đường viền nào).

input[type="email"], input[type="password"], input[type="text"] 
{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 42px; // Increase height as required 
    margin-bottom: 30px; 
    padding: 0 20px; // Now only left & right padding 
} 

Điều này giúp mọi thứ ổn định hơn và hoạt động tốt trên các khung như Bootstrap.

Hoặc, bạn có thể tăng chiều cao cố định hoặc đặt height: auto; và điều chỉnh phần đệm trên cùng và dưới cùng theo yêu cầu.

Answer 2

Có vẻ như -moz-box-sizing đang gây ra sự cố của bạn.

input[type="email"], input[type="password"], input[type="text"] 
{ 
    -moz-box-sizing: border-box; // remove this line 
    height: 25px; 
    margin-bottom: 30px; 
    padding: 20px; 
} 

Xóa dòng sẽ phát phá với kích thước đầu vào của bạn để bạn có thể thêm quy tắc chung cho kích thước hộp cho CSS của mình.

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
} 

Answer 3

::-webkit-input-placeholder { /* Chrome, Safari */ 
    color: #aaa; 
    font-size: 18px; 
} 

:-moz-placeholder {   /* Firefox 18- */ 
    color: #aaa; 
    font-size: 18px; 
} 

::-moz-placeholder {   /* Firefox 19+ */ 
    color: #aaa; 
    font-size: 18px; 
} 

:-ms-input-placeholder {  /* Internet Explorer */ 
    color: #aaa; 
    font-size: 18px; 
} 

Answer 4

Cố gắng giảm phần đệm trên cùng và dưới cùng. Một số cách bố trí dọc bao gồm trình giữ chỗ. Đừng quên đặt height của phần tử thành 100%.

input[type="email"], input[type="password"], input[type="text"] { padding: 0 20px; height: 100%; }