0

次のコードは、IE を除くすべてのブラウザーで正確に機能します。入力の幅は 300px ですが、IE ではフォーカスされている場合にのみ適切なサイズになります。max-width と min-width も試しましたが、うまくいかないようです。非アクティブな入力が大きいことがわかるように、画像を添付します。

http://kepfeltoltes.hu/131104/IE_www.kepfeltoltes.hu_.jpg

そして、ここにコードとフィドルがあります: HTML:

<div id="label">
<form action="" method="post">
<label for="name">
<input class="input1" type="text" placeholder="Your name" name="name" id="name" />
</label>
<label for="E-mail">
<input class="input1" type="text" placeholder="Your e-mail" id="email"/>
</label>
<label for="Subject">
<input class="input1" type="text" placeholder="Subject" id="subject" />
</label>
<label for="Message">
<textarea class="input2" name="message" rows="20" cols="20" id="message" placeholder="Message"></textarea>
</label>
<label>
</form>

CSS:

#label {
    width:960px;
    height:600px;
}
input {
    width:300px;
    max-width:300px;
    min-width:300px;
    -moz-border-color: #0d1025;
    -moz-border-width:medium;
    border-color: #0d1025;
    border-width:medium;
    margin-top: 15px;
    border-style:solid;
}
.input1 {
    width:300px;
    max-width:300px;
    height:30px;
    display:block;
}
.input2 {
    width:650px;
    max-width:650px;
    max-height:270px;
    height:270px;
    margin-left:320px;
    margin-top:-144px;
    border-color: #0d1025;
    border-width:medium;
    border-style: solid;
}

::-webkit-input-placeholder {
   color: #0d1025;
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}

:-moz-placeholder { /* Firefox 18- */
   color: #0d1025;  
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #0d1025;  
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}

:-ms-input-placeholder {  
   color: #0d1025;  
   font-style:italic;
   padding-left:15px;
   font-weight:bold;
}
input:focus { 
    outline: none !important;
    border-color:#009bcf;
    /*box-shadow: 0 0 5px #009bcf;*/
}

textarea:focus {
    outline: none !important;
    border-color:#009bcf;
}

フィドル:

http://jsfiddle.net/h2core/hLxf6/

私は何を間違えましたか?ご協力いただきありがとうございます!

4

1 に答える 1

1

(編集済み)

IE プレースホルダーの最大幅を試すことができます。

    :-ms-input-プレースホルダー {  
       色: #0d1025;  
       フォントスタイル:斜体;
       パディング左:15px;
       font-weight:太字;
       最大幅:285px;
    }

于 2013-11-04T11:02:09.957 に答える