IE7 错误，我的表单输入字段缩进答案

【问题标题】：IE7 bug, my form input fields get indentedIE7 错误，我的表单输入字段缩进
【发布时间】：2014-01-15 00:04:08
【问题描述】：

HTML

<form id="contact_form" action="#" name="" method="POST">
  <label for="name">NAME</label>
  <input type="text" name="name" id="name" class="contact_form_input" />
  <label for="email">EMAIL</label>
  <input type="text" name="email" id="email" class="contact_form_input" />
  <label for="subject">SUBJECT</label>
  <input type="text" name="subject" id="subject" class="contact_form_input" />
  <label for="message">MESSAGE</label>
  <textarea name="message" id="message"></textarea>
  <input type="submit" class="submit" name="submit" value="Submit" />
  <input type="reset" class="reset" name="reset" value="Reset" />
</form>

CSS

form#contact_form{
width:auto;
height:auto;
margin:0px;
margin-left:73px;
padding:0px;
float:left;
clear:both;
}

form#contact_form label{
float:left;
clear:both;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}

input.contact_form_input{
width:474px;
height:36px;
margin:0px;
margin-bottom:9px;
padding:0px;
float:left;
clear:left;
}

form#contact_form textarea{
width:479px;
height:150px;
margin-bottom:9px;
float:left;
clear:left;
}

您可以看到here 在 IE7 中，文本输入会获得某种“左边距”。我怎样才能摆脱那个保证金？谢谢

【问题讨论】：

标签： html css internet-explorer-7 internet-explorer-6

【解决方案1】：

您最简单的选择实际上是使用以下 CSS：

form#contact_form label{
display: block;
margin-left:3px;
margin-bottom:6px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:italic;
font-weight:bold;
}

但我建议您将每个输入行（包括标签）包装在块级元素中，例如 <p> 标记或列表项：

<form id="contact_form" action="#" name="" method="POST">
  <ul>
    <li>
      <label for="name">NAME</label>
      <input type="text" name="name" id="name" class="contact_form_input" />
    </li>
  ...

来自 A List Apart 的This article 是一个很好的介绍。

【讨论】：

是的……这就是我以前写表格的方式……但现在我试着简化一下
+1 用于正确编码。在需要时简化代码是件好事，但这些块元素的存在是有原因的。菲尔是对的，这会解决你的问题:)
第一个选项没有解决我的问题，我决定包装我的标签并输入到
并解决了它。让我们看看是否有人可以对我的问题给出明确的答案（也许是关于盒子模型的东西？！）如果没有，我会将这个答案标记为正确。谢谢@Phil.Wheeler（你鼓励我不要改变我的旧习惯：P）

【解决方案2】：

我建议使用条件 cmets：（把这个放在头上）

<!--[if lt IE 8]>
        <link href="IE.css" rel="Stylesheet" type="text/css"/>

    <![endif]-->

并设置一些单独的 CSS_

     input.contact_form_input{
        width:474px;
        height:36px;
        margin:0px;
        margin-bottom:9px;
    margin-left:-10px;/*or whatever px distance works*/
        padding:0px;
        float:left;
/*remove clear:left;*/
    }

这就是我为使 IE 正常运行而一直做的事情。

【讨论】：