0

私はこの CSS を持っていますが、私のテキストは Google Chrome と Ie で正しく表示されます。ただし、Firefox ではありません。理由がわかりません。

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>

スクリーン

ファイアフォックス: これはFirefoxにあります

クロム： これはクロム

4

2 に答える 2

1

問題は指定された高さです。入力から高さパラメーターを削除すると、問題は解決されます。

代替（より良いimo）ソリューション： 問題はボックスサイジングプロパティでした（http://www.w3schools.com/cssref/css3_pr_box-sizing.asp）

指定された高さと幅と 13 < 9+8 (上下のパディング) 内のパディングを計算するborder-boxに設定されたため、実際のコンテンツ (テキスト) のためのスペースがありませんでした。指定された高さを使用する必要がある場合、最良の解決策は次を使用することです。

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 に答える