Forms 表单标签/输入对齐不符合IE7中的预期

我有一个html5表单，它在IE8和更高版本中显示，也在Chrome、Safari、Foreox和Opera中显示。但在IE7中，标签对齐方式是完全不同的——标签显示在输入字段的上方，而不是左侧，并且水平对齐，这就是我想要的

我在StackOverflow上没有发现这个问题，但在CSS技巧上发现了非常类似的问题。我确实在这里有一个链接，但作为第一张海报，我的问题被拒绝了，因为其中有2个以上的链接（因为下面还有2个链接显示了问题的截图）。所以我不得不把它移除。。。关于CSS技巧的帖子的答案给了我一些要看的地方，但并不具体——它说“我自己解决了。解决方案包括移动标签标签和一些IE条件CSS的组合。”

这些屏幕截图显示了表单显示的差异：

IE7：

IE10：

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. johnsmith@gmail.com" 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>

---

问题是，您正在为选择框、文本区域和输入以及标签清除浮动，而您应该只为标签清除浮动

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

移除

清除：左侧从标签的CSS选择器中，选择，文本区域，输入

，并将其添加到标签的CSS选择器中：

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;
}

---

打字：

对齐：居中->
文本对齐：居中
但是，在这种情况下，您最好删除此无效样式，而不是使用
文本对齐：居中
。哦，您是对的，现在已经删除了它-谢谢。我知道它必须是简单的，并且可能与浮动/清除有关。现在在IE7中看起来和新浏览器一样。谢谢
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;
}