Firefox 输入占位符和框大小

Posted 2023-03-05

【中文标题】Firefox 输入占位符和框大小

【英文标题】：Firefox Input Placeholder & Box Sizing

【发布时间】：2014-09-27 15:15:52

【问题描述】：

我找不到太多关于此问题的修复信息，但我输入的占位符文本未在 FF 中显示。

我已经看到了一些引用 ::-moz-placholder 的修复 - 尝试了这个但没有修复...来源：http://css-tricks.com/almanac/selectors/p/placeholder/

我觉得这可能与我在输入中启用的 box-sizing 有关，因为当我删除占位符显示的 box sizing 时，它们会变得狂躁...

这是我的样式：

input 
            height: 26px;
            width: 100%;
            border-radius: 3px;
            -moz-border-radius: 3px;
            color: #333;
            padding: 23px 10px 20px 10px;
            display: block;
            box-sizing: border-box; /* css3 rec */
            -moz-box-sizing: border-box; /* ff2 */
            -ms-box-sizing: border-box; /* ie8 */
            -webkit-box-sizing: border-box; /* safari3 */
        

【问题讨论】：

似乎删除 height: 26px; 在 Firefox 中有效。

我试过了，不幸的是没用——我认为它会成功。我的 Firefox 刚刚更新到最新版本，所以这对您来说也是一个因素？

这可能也是一个因素，尽管我已经将我的 firefox 更新到了最新的 (v31) 并且似乎删除了 height 工作正常 :)

【参考方案1】：

这个问题的解决方案在这里找到：Box sizing on inputs in firefox hides text

将输入的高度设置为 100% 并根据需要减少填充。