0

此表单在 Chrome 和 Firefox 中运行良好。但是在 IE 上，这太疯狂了。

您可以在此处查看表格：http ://www.alsite.com.br/clinicadosono

为什么这在 IE8 中不能正常工作？IE9听起来不错！

这是我的登录表单的代码：

<form class="form-1" action="" method="post">
    <p><input type="text" name="usuario" placeholder="Login" required /></p>
    <p><input type="password" name='senha' placeholder="Senha" required /></p>
    <p><input type="submit" name="enviar" value="Entrar" /></p>
    <div class="clear"></div>
    <p class="clique_aqui_cadastro">Não possui cadastro? <a href="#">Clique aqui</a></p>
</form>

这是我的CSS：

.form-1 {
    width: 256px;
    margin:0 auto;
}

.form-1 input[type=text],
.form-1 input[type=password] {
    width: 222px;
    height: 10px;
    padding: 8px 4px 8px 25px;
    margin-bottom: 5px;

    /* Styles */
    border: 1px solid #d2d3d4; /* Fallback */
    background: #f1f1f1 url(../imagens/icone_login.png) left no-repeat;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: #878787;
    font-family: 'Comfortaa', cursive;
    font-size:12px;

    outline:none;

    -webkit-border-radius:5px;
    border-radius:5px;
}
.form-1 input[type=password] {
    background: #f1f1f1 url(../imagens/icone_pass.png) left no-repeat;
    width: 126px;
    float:left;
    margin-right:5px;
}

.form-1 input[type=submit] {
    width: 90px;
    height: 28px;
    background: #78a7a7;
    border: 1px solid #6db5b5;
    cursor: pointer;
    transition: all 0.3s ease-out;
    float:left;
    /* Font styles */
    color: #fff;
    font-size: 12px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.form-1 input[type=submit]:hover{
    color:#000;
}

PS：我试图将 css 分开[type=text]，[type=password]但仍然无法正常工作......

4

1 回答 1

1

您的jQuery.Placeholder插件将密码的type属性更改input为，text而不是密码，以便正确显示占位符文本（仅当没有原生浏览器支持 HTML5placeholder属性时）。

因此在 IE 中你的这个 CSS 规则：

.form-1 input[type=password] { etc... }

没有得到应用。

将新.password类应用于您的输入并相应地更改您的 CSS：

.form-1 input[type=password], .form-1 input.password {

 <input class="password" type="password" name='senha' placeholder="Senha" required />
于 2013-03-13T13:34:50.097 回答