0

我编写了以下代码来创建一个三列布局，其中第一列和最后一列分别没有左右边距（根据定义，三列将具有与动态生成的完全相同的类 - 见最后段落）：

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

HMTL：

<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 上运行的方法吗？

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

4

3 回答 3

3

我会使用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 如何工作的一个很好的例子进去。

于 2010-03-09T02:35:23.520 回答
1

你可以试试ie7.js之类的东西。它使用 javascript 来使这些工作正常工作。

除此之外，它看起来不像 ie8/ie7 支持它。

于 2010-03-09T02:28:22.893 回答
1

我不想这么说，但由于 IE 对您尝试使用的伪类没有适当的支持，您可能不得不求助于 Javascript 来解决您的问题。

您可以编写一个在 document.ready() 上运行的非常简单的 jQuery 函数，该函数与您的伪类匹配并为它们添加适当的样式。在 IE 条件注释中加载 Javascript 文件，一切顺利。

于 2010-03-09T02:29:43.683 回答