输入文字显示在Chrome中，但不显示在Firefox中

Question

如果您将此jsfiddle的结果设置为完整大小，那么单击搜索图标以显示输入字段，如果您在chrome中输入字段，则可以看到文本，但在firefox中，文本会键入但是您看不到吗？

http://jsfiddle.net/vxkp6beg/

如果我在bootstrap中删除填充，我可以看到文本，但字段不再是全高，文本被截断。

.navbar-collapse form[role="search"] input {
    padding: 25px 12px; # here
    font-size: 18pt;
    opacity: 0;
    display: none;
}

我也试过但这只会使输入字段更大。

-moz-box-sizing: content-box;

有没有办法解决这个问题，对于Firefox或者最好是针对所有其他浏览器？

火狐：

铬：

Answer 1

填充占据了整个元素。你可以保持左边的填充，只需删除顶部填充并将高度设置为50px（25px填充x 2）http://jsfiddle.net/vxkp6beg/7/：

.navbar-collapse form[role="search"] input {
        padding: 0 12px;
        height: 50px;
        font-size: 18pt;
        opacity: 0;
        display: none;
    }

Answer 2

您可以通过将属性display设置为none来完全删除该元素。

navbar-collapse form[role="search"] input { padding: 25px 12px; # here font-size: 18pt; opacity: 0; display: none; }

为什么只是 使用属性opacity？

Answer 3

它与填充有关。移除衬垫或移除元素上的固定高度。