forms - -moz-box-sizing 规则阻止用户在 firefox 中看到表单字段输入

Question

正如标题所说，我手上有一个奇怪的 css 错误。我已经使用 bootstrap 和一些自定义 css 构建了一个 Rails 应用程序，最初在 chrome 中测试了整个东西。我开始在 firefox 中检查它，我的用户登录表单字段似乎没有响应单击它们或键入它们。您看不到占位符值，也看不到您输入的内容。有没有人听说过这个？知道是什么原因造成的吗？

为了说明，我制作了一个 jsfiddle(我的第一个)。我有点笨手笨脚，只是从我的检查员那里复制了 css，所以有点乱。在firefox中打开它，无法输入表格。在 Chrome 中它很好。这个 fiddle 的违规行似乎是 28，即 -mox-box-sizing 规则。

http://jsfiddle.net/vRF3F/

.row-fluid [class*="span"] {
    -moz-box-sizing: border-box;
    display: block;
    float: left;
    margin-left: 2.12766%;
    min-height: 30px;
    width: 100%;
}

Answer 1

好的，我想我已经找到原因了:

如果删除这一行:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 4px 4px 4px 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
/*    height: 20px;*/
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
}

它会起作用的。设置 height 属性将导致父 div 折叠，因此您将不再看到输入框，因此它似乎不起作用。单独填充应该可以给它一个高度。

在这里查看更新的 fiddle :
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/