Văn bản trình giữ chỗ không được căn giữa theo chiều dọc trong Safari

Question

Bạn có bất kỳ ý tưởng nào về cách để có được thuộc tính giữ chỗ ở chính giữa theo chiều dọc trong safari không? Mặc dù khi bạn bắt đầu nhập, văn bản được căn giữa hoàn toàn.

Answer 1

trình tốt cho tôi:

<input type="text" name="first_name" placeholder="Search" style="height: 50px;"> 

Cố gắng thay đổi này:

#register-block-fields input { 
width: 230px; 
height: 41px; 
padding-left: 40px; 
padding-right: 20px; 
height: 41px; // Changed from line-height 
color: #878787; 
font-size: 12px; 
font-family: Arial, Helvetica, sans-serif; 
background: none; 
} 

Answer 2

Cách dễ nhất là sử dụng cả thuộc tính CSS line-height và height CSS. Chỉ cần nhập văn bản line-height có cùng giá trị với số height.

Bằng cách này, trang web sống của bạn trông ổn với tôi trong chrome 16.

Answer 3

Đã có lỗi này quá. Thiết lập chiều cao dòng trong ems cố định điều này cho tôi. Nó trông giống nhau trong Chrome, Safari (máy tính để bàn và iOS) và Firefox. và tôi đã thêm thủ thuật \ 9 để có được định tâm dọc trong IE. đây là css của tôi

height: 36px;  
line-height: 1.2em; 
line-height: 26px\9; /*for IE */ 

Answer 4

Đối với tôi, giải pháp tốt nhất là sử dụng line-height: bình thường và hack cho IE 8.

<input type="text" name="test_name" placeholder="Search"> 


input { 
    height: 35px; 
    line-height: normal; 
    line-height: 32px\0/; /* for IE 8 */ 
} 

Answer 5

-Safari Solution-

tôi đã bị mắc kẹt về vấn đề này trong một thời gian dài mặc dù sử dụng

input::-webkit-input-placeholder { line-height:normal!important; }

Nó chỉ ra rằng hav ing chiều cao dòng trong phần tử input ngay lập tức đã phá vỡ chiều cao dòng input::webkit-input-placeholder của tôi.

Giải pháp mở rộng:

tôi loại bỏ các line-height trong phong cách đầu vào của tôi và nó cố định vấn đề của tôi.

Answer 6

Đối với tôi này làm việc tốt:

line-height: inherit;