css - 如何使伪类与 Internet Explorer 7/8 一起工作？

Question

我编写了以下代码来创建一个三列布局，其中第一列和最后一列分别没有左右边距(根据定义，三列将具有完全相同的类，因为它们是动态生成的 - -见最后一段):

#content {
    background-color:#edeff4;
    margin:0 auto 30px auto;
    padding:0 30px 30px 30px;
    width:900px;
}
    .column {
        float:left;
        margin:0 20px;
    }
    #content .column:nth-child(1) {
        margin-left:0;
    }
    #content .column:nth-child(3) {
        margin-right:0;
    }

.width_33 {
    width:273px;
}

HTML:

<div id="content">
    <cfoutput query="IndexView" group="pName"> <!--loop one to create the columns -->
        <div class="column width_33"> <!-- Columns -->
            <h3>#IndexView.pName#</h3>
            <ul>
            <!---LOOP two--->
            <cfoutput>
                <li>
                    #IndexView.titles#
                </li>
            </cfoutput>
        </div>
    </cfoutput>
</div>

问题是这段代码在 Internet Explorer 7 和 8 中不起作用？我可以在 IE 中使用的唯一伪类(在本例中)是“first-child”，但这不会消除第三列和最后一列的右边距。有谁知道我可以让这段代码在 IE 7/8 上运行的方法吗？

一个重要的旁注:这三列是通过查询循环动态生成的，因此每列的类属性都是相同的。

Answer 1

我会使用 jquery。您甚至可以将对脚本的调用包装在条件注释中。 jquery 1.4 在选择器方面完全符合 CSS 3，因此您可以使用相同的选择器，然后为您想要设置样式的元素指定一个类。像这样的东西:

This is the jquery code:
 <!--[if IE]>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript"> 
    $(function() {
     $("#content .column:nth-child(1)").addClass("childone");
     $("#content .column:nth-child(3)").addClass("childthree");
    });
 </script>
 <![endif]-->
This is your CSS, with the new classes for IE support:

 #content .column:nth-child(1), .childone {
    margin-left:0;
 }
 #content .column:nth-child(3), .childthree {
    margin-right:0;
 }

编辑

上面的会有效，但您不熟悉 jquery 或如何进行动态添加类等更改，我可以理解您对解决方案的困惑和抵制。这是一个稍微修改过的版本，可以使事情更清楚一些:

 <!--[if IE]>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript"> 
     $("#content .column:nth-child(1)").css("margin-left","0");
     $("#content .column:nth-child(3)").css("margin-right","0");
 </script>
 <![endif]-->

在这种情况下，脚本简单地将您想要的相同样式规则添加到相同的 CSS 选择器，而不是使用可以添加到样式表中的虚拟类。我更喜欢使用虚拟类，因为它允许我在不阻塞脚本的情况下为同一个类设置多个样式规则，但是由于每个选择器只有一个规则，所以这是一个很好的示例，说明了 jquery 的工作方式，无论您使用哪种方法进去吧。