0

我有这个 CSS，但我的文本在 Google Chrome 和 Ie 中正确显示；但不是火狐。我不知道为什么。

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>

筛网

火狐： 这是在火狐上

铬合金： 这是铬

4

2 回答 2

1

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

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

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

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

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

于 2013-02-06T00:48:54.710 回答
0

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

对于相同的视图设置height为自动

于 2013-02-06T01:01:23.177 回答