表單標籤/輸入對齊方式與IE7不一樣

我有一個html5表單，可以在IE8及以上版本中顯示，也可以在Chrome，Safari，Forefox和Opera中顯示。但在IE7中，標籤對齊方式完全不同 - 標籤顯示在輸入字段上方而不是左側，而且水平對齊，這就是我所追求的。表單標籤/輸入對齊方式與IE7不一樣

我還沒有在StackOverflow上發現這個問題，但是發現了一些非常類似於CSS技巧的東西。我確實在這裏有一個鏈接，但作爲第一次海報我的問題被拒絕，因爲它有超過2個鏈接（由於額外的2個鏈接下面顯示的問題截圖）。所以我不得不刪除它......對於CSS技巧的帖子的答案給了我一些需要看的地方，但它不是特定的 - 它說「我自己的想法，解決方案包括將標籤標籤和一些IE條件CSS「。

形式的顯示的差別示於這些截圖：

IE7：http://www.s203574650.websitehome.co.uk/Screenshots/IE7_form.jpg

IE10：http://www.s203574650.websitehome.co.uk/Screenshots/IE10_form.jpg

HTML代碼：

<form id="contact" action="contact_us.php" method="post"> 
<div> 
<label for="fullname">Your Full Name:</label> 
<input id="fullname" name="fullname" type="text" placeholder="eg. John Smith" required aria-  required="true" > 
</div> 
<div> 
<label for="email">Your Email Address:</label> 
<input id="email" name="email" type="email" placeholder="eg. [email protected]" required aria- required="true" title="Please enter a valid email address"> 
</div> 
<div> 
<label for="phone">Your Phone Number (optional):</label> 
<input id="phone" name="phone" type="tel" placeholder="eg. 07000 123456" pattern="([0-9]|(|-)?) {10,14}" title="Please use only digits, spaces and hyphens."> 
</div> 
<div> 
<label for="experience">Your Badminton Experience:</label> 
<select name="experience"> 
<option value="default">Please Choose</option> 
       <option value="Intermediate">Intermediate</option> 
        <option value="Advanced">Advanced</option> 
        <option value="Don't know">Don't know</option> 
        </select>     
</div> 
<div> 
<label for="club_matches">Have you previously played matches for a club?:</label> 
<input type="radio" name="club_matches" value="Yes">Yes 
<input type="radio" name="club_matches" value="No" checked>No 
</div> 
<div>     
<label for="info">Additional Info/Questions: </label> 
<textarea name="info" type="text"> 
</textarea> 
</div> 
<div> 
<label for="blank"></label> 
<input type="submit" id="submit" value="Submit Form" name="sent"> 
</div> 
</form>

而CSS：

/* styles for contact form */ 
#contact 
{ 
background-color: #DDE2E2; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
border: solid slategrey 2px; 
box-shadow: 3px 3px 5px slategrey; 
-o-box-shadow: 3px 3px 5px slategrey; 
-moz-box-shadow: 3px 3px 5px slategrey; 
-webkit-box-shadow: 3px 3px 5px slategrey; 
padding: 3%; 
font-family: arial; 
color: #0099FF; 
font-weight:bold; 
align:center; 
width: 80%; 
margin-left:40px; 
} 

label 
{ 
width: 40%; 
float:left; 
text-align:right; 
margin-right: 2em; 
font-size: 0.8em; 
} 

label, select, textarea, input 
{ 
margin-bottom: 1.5em; 
clear:left; 
margin-left: 1em; 
} 

#submit 
{ 
margin-top: 5%; 
margin-bottom: 0; 
}

來源

2012-12-10 cpr

錯字：'對齊：中心;' - >'文本對齊：中心;'然而，在這種情況下，您可能會更好地移除此無效樣式，而不是使用「text-align：center」。 –

哎呀，你說得對，現在已經刪除了 - 謝謝。 – cpr

問題在於，當清除標籤時，您正在清除選擇框，textareas和輸入以及標籤的浮動內容。

label, select, textarea, input { 
    margin-bottom: 1.5em; 
    clear: left; 
    margin-left: 1em; 
}

從CSS選擇label, select, textarea, input刪除clear: left;並把它添加到一個用於label：

label { 
    width: 40%; 
    float: left; 
    clear: left; 
    text-align: right; 
    margin-right: 2em; 
    font-size: 0.8em; 
} 
label, select, textarea, input { 
    margin-bottom: 1.5em; 
    margin-left: 1em; 
}

來源

2012-12-10 18:30:34

我知道它必須是簡單的東西，可能與漂浮/清除有關。現在在IE7中看起來和新的瀏覽器一樣。謝謝！ – cpr

表單標籤/輸入對齊方式與IE7不一樣

回答

相關問題