Css 仅在IE7中显示奇怪行为的HTML表单

我一直在为一家公司的网站开发一个新页面，并成功地按照指定的格式设计表单。该表单在除IE7之外的所有浏览器中都能正确显示，但尽管多次使用不同的关键字搜索StackOverflow和Google，我仍然无法找到任何类似的问题或解决方案

我试图在JSFIDLE中复制这种行为，但没有成功。相反，我将附上前后行为的两个截图，以及相关代码片段

第一个图像显示表单的外观，这是浏览器首次加载页面时的显示方式。但是，表单行为有点不稳定，当用户开始在输入框中键入或单击提交时，以下更改会生效，这似乎是随机的

这是我正在使用的HTML代码，没有什么特别之处：

<form id="enquiry" action="/guides/thanks" method="post">
<div>
<ul>
    <li>
        <label for="firstname">First name*:</label>
        <input id="firstname" type="text" name="firstname" size="40" value="{{firstname | escape }}" {{ is_missing("firstname") }} />
    </li>
    <li>
        <label for="lastname">Last name*:</label>
        <input id="lastname" type="text" name="lastname" size="40" value="{{lastname | escape }}" {{ is_missing("lastname") }} />
    </li>
    <li>
        <label for="email">Email*:</label>
        <input id="email" type="text" name="email" size="40" value="{{email | escape }}" {{ is_missing("email") }} />
    </li>
    <li>
        <label for="email2">Confirm email*:</label>
        <input id="email2" type="text" name="email2" size="40" value="{{email2 | escape }}" {{ is_missing("email2") }}/>
    </li>
    <li>
        <label for="organization">organization*:</label>
        <input id="organization" type="text" name="organization" size="40" value="{{organization | escape }}" {{ is_missing("organization") }}/>
    </li>
    <li>
        <label for="position">Job title:</label>
        <input id="position" type="text" name="position" size="40" />
    </li>
    <li>
        <label for="country">Country*:</label>
      <select id="country" name="country" value="{{country | escape }}" {{ is_missing("country") }}>
            <option value="">Choose&hellip;</option>
            <option disabled="disabled" value="">----</option>
            <option value="US">United States</option>
            <option disabled="disabled" value="">----</option>

            <option value="AF">Afghanistan</option>
            ...
            <option value="ZW">Zimbabwe</option>

        </select>

    </li>
    <br>
    <div>
    <li class="submit-row">
    <input class="link-button download-button" type="submit" value="Submit your details" />
    <br><br><input class="link-button" type="submit" value="Submit your details" />
    </li>
</form>

---

非常感谢您的帮助。

此问题已解决。我发现

form#enquiry ul li label  

在我的CSS中，对象被设置为220px，这与

li label {
    margin-left: -115px;
}

---

造成了问题。将宽度设置为125px，剩余边距设置为0px似乎解决了问题。

您提供的代码不够。它无法复制您描述的正确或不正确的布局。您似乎在使用某种模板引擎：它遍布您的代码，但您在问题中没有提到它；也许您可以告诉我们，因为它很有可能是相关的，特别是如果它是客户端javascript代码，并且实时更新DOM。您是否确认您的模板库与IE7兼容？而

is_missing（）

调用做什么呢？模板引擎是Jinja/Flask，除了在需要时向字段添加边框之外，它不会以可能导致这种行为的方式影响DOM。is_missing（）检查是否填写了所有必填字段，如果没有，则向其添加红色边框和.error类。在进一步修改代码之后，我发现问题在于基本css文件中其他位置设置的

对象的宽度。不过，感谢您的评论。由于我的代表<10，我将在7小时内无法解决此问题。这是否意味着您已发现问题？干得好。我认为这与这里描述的旧浮动问题有关：当然，为了避免怪癖模式，您应该正确关闭制动标签
，并且乞讨处的

div

和

ul

也应该有关闭标签。我在这里准备了一把小提琴：

li label {
    margin-left: -115px;
}