Question

在IE8中，当字段被聚焦时，它看起来是点缀的。此外，当输入密码字段时，它显示奇怪的symblos（此错误也在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>

哪里可能是问题？

Answer 1

嘿，现在清除默认大纲

就像这样

.field input:focus{
outline:0;
}

Answer 2

对于字体，请更改密码框中的字体：

#user_password {
    font-family: sans-serif;
}

在IE和Chrome中，虚线输入的边框和密码看起来很奇怪

2 个答案: