Question

此表单适用于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：我试图将[type=text]和[type=password]的css分开，但仍无法正常工作......

Answer 1

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

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

placeholder

未获得应用。

在您的输入中应用新的.form-1 input[type=password] { etc... }类并相应地更改CSS：

.password

当关注密码输入类型时，登录表单会更改css

1 个答案: