2013-11-04 57 views
0

以下代碼在除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/

我做錯了什麼?謝謝你的幫助!

+0

圖片網址無效。 –

+0

http://oi41.tinypic.com/z4rk9.jpg試試這個 – h2c

+0

哪個版本的IE?在IE9中其運行類似於Chrome。 –

回答

0

(編輯)

你可以嘗試IE佔位符最大寬度:

 

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

+0

謝謝,但你誤會了我。我希望輸入的大小爲300px,即使它沒有被聚焦。 – h2c

+0

好的,試試這個。 – tchudyk

+0

看起來我找到了解決方案:box-sizing:border-box。感謝你的幫助! – h2c

相關問題