IE中的不同输入大小

以下代码在除IE之外的每个浏览器中都能正确工作。输入的宽度为300px，但在IE中它只有在焦点时才能获得正确的大小。我试过最大宽度和最小宽度，但它似乎没有工作。我附上图片，你可以看到不活动的输入是更大：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/

我做错了什么？谢谢你的帮助！

来源

2013-11-04 h2c

图片网址无效。 –

http://oi41.tinypic.com/z4rk9.jpg试试这个 – h2c

哪个版本的IE？在IE9中其运行类似于Chrome。 –

（编辑）

你可以尝试IE占位符最大宽度：

 

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

来源

2013-11-04 11:02:09 tchudyk

谢谢，但你误会了我。我希望输入的大小为300px，即使它没有被聚焦。 – h2c

好的，试试这个。 – tchudyk

看起来我找到了解决方案：box-sizing：border-box。感谢你的帮助！ – h2c

IE中的不同输入大小

回答

相关问题