文字出现在Chrome中但不是Firefox？

Question

我有这个CSS，但我的文字正好在谷歌浏览器中显示，即;但不是火狐。我无法弄清楚为什么。

input[type="text"] { width: 274px;  border: 1px solid #333; background-color: #181818; padding-top: 9px; color: #777; height: 13px; padding-left: 4px; padding-bottom: 8px;}
input[type="password"] { width: 274px;  border: 1px solid #333; background-color: #181818; padding-top: 9px; color: #777; height: 13px; padding-left: 4px; padding-bottom: 8px; }

有人可以推荐一些方法来展示它吗？

HTML：

<form method="post" action="CheckCredentials.php">
Member Login <Br>
Username: <br><input type="text" name="Username"> <br><br>
Password: <br><input type="password" name="Password"> <br><br>
<input type="submit" name="Login" value="Login!">
</form>

Screenies

火狐：

铬：

Answer 1

问题是指定的高度，如果从输入中删除高度参数，问题就解决了。

替代（更好的imo）解决方案： 问题是box-sizing属性（http://www.w3schools.com/cssref/css3_pr_box-sizing.asp）

它被设置为 border-box ，它计算指定高度和宽度内的填充，并且<1>。 9 + 8（顶部和底部填充）因此实际内容（文本）没有空间。如果您需要使用指定的高度，最好的解决方案是使用：

box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */

这将计算元素在指定高度之外的填充，所以现在输入的实际高度将是13 + 9 + 8px。

Answer 2

更改padding文字消失的填充原因。

对于同一视图集height为自动