IE7 CSS：具有媒体查询的第一个子选择器

我在媒体查询中有以下CSS（最小宽度768px）：

覆盖（for:first-child）适用于除IE7之外的所有浏览器。我想知道有没有什么好的理由。。。我还尝试反转边距值（将其应用于所有（2）.formHolder节div，然后使用不同的选择器：

.formHolder-section {width: 235px; position: relative; float: left; margin: 0 20px 0 40px;}
.formHolder-section + .formHolder-section { margin: 0; }

这也不起作用。我解决了我的问题，只给两个div留了一些空白（而不是只给第一个div）。奇怪的是…除了第一个子选择器之外，所有其他CSS都在这里工作。我想知道是否有人知道问题的原因

以下是一些HTML（不过，HTML/CSS同样适用于除IE7之外的所有地方）：

*表示所需的字段


第一:*


最后:*


电邮地址：*


你18岁吗*
对


不

[...]



您打算何时购买新车？
一个月之内


在未来3个月内


在未来6个月内


一年之内


一年以上


你对什么丰田汽车感兴趣？

[...]

这是DOCTYPE（在这里使用HTML5——毫无疑问，我在quirksmode中看到了一些奇怪的东西——但是，不要认为这是问题所在）

• 顺便说一句，我是从IE8获得的（因此，IE7的html标记会有所不同——但是，我现在正在另一个VM中进行测试）

---

两个单词-怪癖模式。第一个子伪选择器在进入IE9之前不会真正正常工作

---

您使用的是什么doctype，能否发布包含

.formHolder部分的部分HTML

divs？能否显示您的媒体查询？您是否使用任何脚本允许IE7和IE8读取媒体查询（Modernizer不支持polyfill，仅对其进行测试）？很抱歉延迟回复您的评论。这是用于包含上述CSS的媒体查询：@media only screen和（min-width:768px）{[…]}。但是，IE再次选择了此部分中的样式（例如，在：first child或X+X选择器之前的选择器工作得很好——以及该查询中的所有其他CSS）。似乎只有兄弟选择器和伪选择器在媒体查询（/ies）中不工作。在该范围（查询）之外，它们工作得很好。不是真正的答案。很棒的站点（我一直在使用它），但不适用于此特定问题。：first child在CSS中的其他位置工作。我正在寻找确切的原因，而不是“在版本9之前它不会工作得很好”。我经常在IE中使用：first child，但没有问题。因此，我想知道这里的问题是什么…以防有人看到媒体查询的问题。另外，请注意，我删除了：first child选择器，第二个CSS行（覆盖）不起作用（参见上面的第二个CSS示例）！因此，这不是特定于选择器的（而是即时边距覆盖）。第二个示例使用下一个同级（+）第一个孩子在你进入IE9之前也有问题，而不是第一个孩子：。怪癖模式是一种生活方式，有很多不同的方式来做同一件事，你应该能够完成这项工作。你的两句话似乎没有联系——在怪癖模式下，

：第一个孩子在任何版本的IE中都不起作用（而且
+
）与IE7/8和这两个选择器相关的bug与怪癖模式无关，事实上，即使在标准模式下，它们也会表现出这些bug，而在标准模式下，它们是可以工作的。
.formHolder-section {width: 235px; position: relative; float: left; margin: 0 20px 0 40px;}
.formHolder-section + .formHolder-section { margin: 0; }

<div class="formContainer">
    <div class="formHolder-section">
        <span class="form-required">*Denotes field as required</span>
        <ul class="form-list">
            <li>
                <label>First:*</label>
                <input type="text" value="" class="form-input-full" name="firstName" id="firstName">
            </li>
            <li>
                <label>Last:*</label>
                <input type="text" value="" class="form-input-full" name="lastName" id="lastName">
            </li>
            <li>
                <label>Email Address:*</label>
                <input type="text" value="" class="form-input-full" name="email" id="email">
            </li>
            <li>
                <label class="listOptionPadding">Are you 18 years old?*</label>
                <input type="radio" value="true" class="form-radio" name="over18" id="over181"> <span class="italic">Yes</span>
                <br>
                <input type="radio" value="true" class="form-radio" name="over18" id="over182"> <span class="italic">No</span>
            </li>
            [...]
        </ul>
    </div>
    <div class="formHolder-section">
        <ul class="form-list">
            <li>
                <label class="listOptionPaddingBottom">When Do You Intend to Purchase a New Vehicle?</label>
                <input type="radio" value="1_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase1"> <span class="italic">Within a Month</span>
                <br>
                <input type="radio" value="3_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase2"> <span class="italic">Within the next 3 Months</span>
                <br>
                <input type="radio" value="6_MONTH" class="form-radio" name="nextPurchase" id="nextPurchase3"> <span class="italic">Within the next 6 Months</span>
                <br>
                <input type="radio" value="WITHIN_YEAR" class="form-radio" name="nextPurchase" id="nextPurchase4"> <span class="italic">Within a Year</span>
                <br>
                <input type="radio" value="OVER_YEAR" class="form-radio" name="nextPurchase" id="nextPurchase5"> <span class="italic">More than 1 Year</span>
            </li>
            <li class="interested-in">
                <label>What Toyota vehicles are you interested in?</label>
            </li>
            [...]
        </ul>       
        <input type="submit" value="Submit" class="form-button rounded">
        <a class="form-terms" href="/ToyotaMotorApp/mobile/tyw/terms.html">View all the terms and conditions</a>
    </div>
</div>

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>