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

发布于 2024-08-23 22:58:14 字数 1175 浏览 12 评论 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.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

爱人如己 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.

半衾梦 2024-08-30 22:58:14

你可以尝试像 ie7.js. 这样的东西,它使用 javascript 来使这些事情发挥作用。

除此之外,看起来 ie8/ie7 不支持

You could try something like ie7.js. which uses javascript to make these things work.

Short of that, it doesn't look like ie8/ie7 support it.

梅倚清风 2024-08-30 22:58:14

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

您可以编写一个非常简单的 jQuery 函数,该函数在 document.ready() 上运行,它与您的伪类相匹配,并向它们添加正确的样式。在 IE 条件注释中加载 Javascript 文件,然后就可以开始了。

I hate to say it, but since IE doens't have proper support for the pseudo classes you're trying to use, you might have to resort to Javascript to solve your problem.

You could write a pretty simple jQuery function that runs on document.ready() that matches your psuedo classes and adds the proper styling to them. Load the Javascript file in an IE Conditional Comment and you're good to go.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文