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

プラグインは、プレースホルダー テキストを正しく表示するために、パスワードのプロパティを passwordではなく にjQuery.Placeholder変更しています (HTML5属性のネイティブ ブラウザー サポートがない場合のみ)。typeinputtextplaceholder

したがって、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 に答える