输入文本在 Chrome 中显示，但在 Firefox 中不显示答案

【问题标题】：Input text shows in Chrome but not Firefox输入文本在 Chrome 中显示，但在 Firefox 中不显示
【发布时间】：2015-02-16 17:32:49
【问题描述】：

如果您将此 jsfiddle 的结果设置为全尺寸，然后单击搜索图标以显示输入字段，如果您在 chrome 中输入该字段，您可以看到文本，但在 Firefox 中，文本确实输入但您看不到？

http://jsfiddle.net/vxkp6beg/

如果我在引导程序中删除填充，我可以看到一些文本，但该字段不再是全高并且文本被截断。

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

我也尝试过，但这只会使输入字段变大。

-moz-box-sizing: content-box;

有什么方法可以为 Firefox 或所有其他浏览器解决此问题？

火狐：

铬：

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

内边距占据了整个元素。您可以保留 padding-left，只需删除顶部填充并将高度设置为 50px (25px padding 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;
    }

【讨论】：

【解决方案2】：

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

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

你为什么不只是使用属性opacity？

【讨论】：

display 设置为none，因为首先有一个按钮显示和扩展输入字段，一旦您单击按钮显示，该按钮就会被删除。

【解决方案3】：

这与填充有关。移除内边距或移除元素上的固定高度。

【讨论】：