web-dev-qa-db-ja.com

IEパスワードボックスをテキストボックスよりも小さくするのはなぜですか？

以下の簡単なフォームを参照してください。パスワードボックスの上のテキストボックスにすぎません。 Internet Explorer 7（および8、そしておそらく他の人）でそれを見ると、テキストボックスはパスワードボックスよりも10ピクセル広いです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE Text vs. Password test</title>
</head>
<body>                 

<form action="test"> 
  <p>
    <input type="text"><br>  
    <input type="password">      
  </p>
</form>          

</body>
</html>

CSSを介して、またはHTMLに何かを追加することによって、それをグローバルに「修正」する方法はありますか？

htmlcssinternet-explorerrendering
52
Patrick McElhaney

これらのタイプのフィールドでは異なるフォントが使用されているためです。

修正は、すべての入力が同じフォントを使用するように指定することです。

<style type="text/css">
  input {
      font-family: sans-serif;                
  }
</style>
96
Konstantin Tarkus

問題はInternet Explorerのデフォルトのエンコーディングです。 Internet Explorerには、UTF-8エンコーディングを使用する場合にフィールド長を同じように表示する問題があります。 IEで、問題のあるページを表示しているときに、エンコーディングを「Windows」（ページ->エンコーディングIE 8））に変更してみてください。そうすれば、私が何を意味するのかが正確にわかります。

3
Chris

現在のページのすべての入力に固定幅を追加できます。

<style type="text/css">
input {
    width: 10em;    
}
</style>
3
Darin Dimitrov

ページにjQueryライブラリを含める場合は、次のコードを使用して次のことができます。

「ドキュメントが完全に読み込まれたら、type = 'text'の最初の入力要素を取得し、その高さと幅をtype = 'password'のすべての入力要素に適用します。」.

私はこれをIE7でのみテストしましたが、それは魅力のように機能しました。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$("input[type='password']").height($("input[type='text']").height());
$("input[type='password']").width($("input[type='text']").width());

});
</script>

これは一般化された答えです（input [type = 'text']に一致する最初の要素を取ります）。照合する特定の要素への参照を取得してから、他のjQueryセレクターを使用して1つ以上のパスワードボックスへの参照を取得できます。 idで要素を取得する方法、または一般的なcssクラスまたはxpath-type式で要素のグループを取得するためのドキュメントをご覧ください。

http://docs.jquery.com/Selectors

1
Rich

フォントサイズは関係ありません。このテストでここに見られるように： http://build.jhousemedia.com/ie_test.php

理由についてしっかりとお答えしたいと思いますが、回避策は、固定幅を適用することです。

0
jerebear

テキストボックスに幅を設定することで解決しますが、それはあなたが望むものではないと思います。

Input [type = text]、input [type = password]のmin-widthを、テキストボックスのデフォルトより大きい値に設定してみてください。これらのセレクターを機能させるには、おそらく http://deanedwards.me.uk のIE8スクリプトが必要です。

0
Macha