0

正如标题所说，我手上有一个奇怪的 CSS 错误。我已经使用引导程序和一些自定义 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%;
}
4

2 回答 2

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/

于 2013-07-12T00:54:43.663 回答
0

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;
}
于 2013-07-12T00:35:29.020 回答