IE中的输入大小不同

时间:2013-11-04 10:51:46

标签: html css internet-explorer input

以下代码在IE中的每个浏览器中都能正常工作。输入的宽度为300px,但在IE中它只有在聚焦时才能获得正确的大小。我尝试了最大宽度和最小宽度,但它似乎不起作用。我附上了一张图片,因为你可以看到非活动输入更大:

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/

我做错了什么?谢谢你的帮助!

1 个答案:

答案 0 :(得分:0)

(编辑)的

您可以尝试使用IE占位符的最大宽度:


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