IE8 before content not displaying

Question

Here is the link to the offending page: http://www.wrightspecialty.com/brokers-agents-questionnaire.html?view=foxcontact

There's a limitation to the form builder I am using. Can't insert text unless it's a label to a textbox, input, etc. IE9, Firefox, Safari and Chrome all display correctly. IE7 has no support and IE8 has limited.

So I'm attempting to insert copy using the :before pseudo selector. For IE8 and below I'm using Google's javascript. This works for IE7 and not IE8

    <!--[if lt IE 9]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> 
    <![endif]-->

And I'm targeting each element in css as such:

    .foxcontainer_brokers div:nth-child(11):before, .foxcontainer_brokers div:nth-child(14):before, .foxcontainer_brokers div:nth-child(17):before, .foxcontainer_brokers div:nth-child(20):before, .foxcontainer_brokers div:nth-child(23):before, .foxcontainer_brokers div:nth-child(23):before, .foxcontainer_brokers div:nth-child(26):before, .foxcontainer_brokers div:nth-child(29):before {
        float: left;
        margin-left: 0;
        margin-bottom: 15px;
        padding-left: 3px;
        width: 100%;
        font-weight: bold;
        clear: both;
        font-size: 12px;
    }

    .foxcontainer_brokers div:nth-child(11):before {
        content: "Schools 8211 - Elementary and Secondary Schools";
    }

    etc...

Anyone have any thoughts? Thanks in advance.

Answer 1

The problem is not with your :before pseudo-element, which IE8 does support. It's with your :nth-child() pseudo-class... and your ::before pseudo-element with double colons, both of which IE8 does not support.

If the IE9 script doesn't work for some reason, perhaps you should try something like Selectivizr + a selector library of your choice (eg jQuery). You should also avoid double colons for pseudo-elements if you're trying to support IE8 because it doesn't understand that syntax.

Answer 2

IE8不支持css3选择器（nth-child）