bootstrap CSS样式的文本输入占位符

Question

我已经绞尽脑汁解决了这个问题，但我不是HTML / CSS专家，所以我不知道。

占位符文本从输入框元素的中心显示得太高。

见下图：

我该如何解决这个问题？你可以在http://siliconalley.com看到它们。当您在输入内部输入时，它实际上看起来没问题。它只是看起来很奇怪的占位符。

Answer 1

您当前的行高为1，更改它以使其等于元素的高度并且它会居中。

line-height: 30px;

Answer 2

你可以强制行高的样式为auto的值，你可以修复Chrome中的问题并且不会在IE中搞乱。我已经在FF，Chrome和IE上进行了测试

.search-query {
    line-height: auto !important;
}

Answer 3

您的line-height:1;声明导致了问题。删除.navbar-search .search-query，这应该没问题。

Answer 4

你的CSS看起来像这样 实际上是线高问题

.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

更改为赞

.navbar-search .search-query {
    margin-bottom: 0;
    padding: 4px 14px;
    font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 21px; /**change the Line-height to like this**/
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }