0

IE8では、フィールドにフォーカスがあると点線で表示されます。また、パスワードフィールドに入力すると、奇妙な記号が表示されます（このバグはChromeにもありますが、他のバグは見栄えがします）。

IEのスクリーンショット：https ：//www.dropbox.com/s/s2b5mpjbyrfn8fh/ie_focused.png

Chromeのスクリーンショット：https ：//www.dropbox.com/s/1zi8eq7zposn6c9/chrome.png

CSS：

.field input {
font-size: 14px;
border: 1px solid rgba(98,141, 40, 0.5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius:5px;
-moz-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
-webkit-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);

}

.field input:focus{
font-size: 14px;
-moz-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
-webkit-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
border: 1px solid rgb(98,141, 40);
border-radius:5px;
}

HTMLフォームの追加

    <form accept-charset="UTF-8" action="/users/sign_in" class="login" id="new_user" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="U+7u2UTO/3LS4dHOL21PgMpln5qZfrEWfwvnN/fxN6A="></div>
<div class="field2">

  <label for="user_email">E-mail Adress</label>
  <input id="user_email" name="user[email]" size="30" type="email" value="">
</div>

  <div class="field2">
    <label for="user_password">Password</label>
     <input id="user_password" name="user[password]" size="30" type="password"> 
</div>

どこに問題があるのでしょうか？

4

2 に答える 2

1

フォントについては、パスワードボックスのフォントを変更します。

#user_password {
    font-family: sans-serif;
}
于 2012-06-22T12:12:07.360 に答える
1

デフォルトのアウトラインをクリアします

このように

.field input:focus{
outline:0;
}
于 2012-06-22T10:26:07.830 に答える