Question

正如标题所说，我的手上有一个奇怪的CSS错误。我使用bootstrap和一些自定义css构建了一个rails应用程序，最初用chrome测试整个事情。我开始在firefox中查看它，我的用户登录表单字段似乎没有响应点击它们或键入。您无法查看占位符值以及您正在键入的内容。以前有人听说过这个吗？是什么原因导致它？

为了说明我做了一个jsfiddle（我的第一个）。我有点笨手笨脚，刚从检查员那里复制了css，所以这有点乱。在Firefox中打开它，表单无法输入。铬合金很好。这个小提琴上的违规线似乎是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崩溃，因此您将不再看到输入框，因此它似乎不起作用。单独填充应该很好，以给它一个高度。

请在此处查看更新的小提琴：
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/

Answer 2

Bootstrap CSS确实包含box-sizing属性以及该选择器中的所有供应商前缀，我不知道您为何只获得-moz

.row-fluid [class*="span"] {
    ...
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    ...
}

尝试使用它来更新你的CSS，你会注意到你的输入现在的高度更小，所以只需设置一个特定的高度值，我认为你会很高兴

.new-user input[type="text"],.new-user input[type="password"]{
    height: 60px;
}

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

2 个答案: