如何使伪类与 Internet Explorer 7/8 一起使用？

发布于 2024-08-23 22:58:14 字数 1175 浏览 8 评论 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 中使用的唯一伪类（在本例中）是“第一个子级”，但这并不能消除第三列和最后一列的右边距。有谁知道我可以让这段代码在 IE 7/8 上运行的方法吗？

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

原文

I've written the following code to create a three-column layout where the first and last columns have no left and right margins respectively (by definition, the three columns will have the exact same class as they're dynamically generated--see last paragraph):

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

The problem is that this code does not work in Internet Explorer 7 and 8? The only pseudo class I can use with IE (in this case) would be "first-child," but this does not eliminate the right margin on the third and last column. Does anyone know of a way I can make this code work on IE 7/8?

A important side note: The three columns are being generated dynamically through a query loop, and therefore the class attribute for each column will be identical.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱人如己 2024-08-30 22:58:14

我会使用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 如何工作的一个很好的例子，无论您使用哪种方法进去吧。

I would use jquery. You could even wrap the call to the script in a conditional comment. jquery 1.4 is fully CSS 3 compliant in terms of selectors, so you can use the same selectors and then assign a class to the elements you want to style. Something like:

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

Edit

The above will work but you are not familiar with jquery or how to make changes like adding classes dynamically, I can understand your confusion and resistance to the solution. Here is a slightly modified version that may make things a bit clearer:

 <!--[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]-->

In this case, instead of using dummy classes that you can add into your stylesheet, the script simple adds the same style rules you want to the same CSS selectors. I prefer to use dummy classes because it allows me to have several style rules for that same class without clogging up the script, but since you only have one rule for each selector, this makes a nice example of how jquery is working, whichever method you go in.

回复收藏 0 原文