占位符文本在Safari中不是垂直居中的

Question

您是否知道如何在safari中将占位符属性设置为垂直居中？ 虽然当你开始输入时，文本完全居中。

Answer 1

最简单的方法是同时使用line-height和height CSS属性。只需为文本输入line-height提供与其height相同的值。

顺便说一句，您的实时网站在Chrome 16中看起来不错。

Answer 2

对我来说，最好的解决方案是使用line-height：normal和hack for IE 8。

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


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

Answer 3

-Safari Solution-

尽管使用了

，我仍然坚持这个问题很长一段时间

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

事实证明，在紧急input元素中使用行高会破坏我的input::webkit-input-placeholder行高。

扩展解决方案：

我删除了输入样式中的行高，这解决了我的问题。

Answer 4

也有这个错误。在ems中设置行高为我解决了这个问题。它在Chrome，Safari（桌面和iOS）和Firefox中看起来都一样。我添加了一个\ 9技巧，以获得IE中的垂直居中。这是我的CSS

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

Answer 5

对我来说很好：

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

尝试更改此内容：

#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 6

对我来说这很有效：

<?php
function letsgo_order_total($order_id, $posted_data, $order) {
    $order = wc_get_order( $order_id );
    $order->set_discount_total(50);
}
add_action('woocommerce_checkout_order_processed','letsgo_order_total',10,3);
?>

Answer 7

其他答案对我都不起作用，可能是因为我的输入元素位于弹性盒内。

我最终需要以px为单位指定行高-与输入元素的默认值相比，该行高的值较大。

input[type="text"] { line-height: 32px; }

感觉就像是黑客，但这是我唯一可以工作的东西。