Как заставить псевдо-классы работать с 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;
}

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?

Важное примечание: три столбца генерируются динамически в цикле запросов, и, следовательно, атрибут класса для каждого столбца будет идентичен.

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, какой бы метод вы ни использовали войти.

Answer 2

Мне неприятно это говорить, но, поскольку IE не имеет надлежащей поддержки псевдоклассов, которые вы пытаетесь использовать, вам, возможно, придется прибегнуть к Javascript для решения вашей проблемы.

Вы можете написать довольно простую функцию jQuery, которая запускается в document.ready (), которая соответствует вашим классам psuedo и добавляет им надлежащий стиль. Загрузите файл Javascript в условный комментарий IE, и все готово.

Answer 3

Вы можете попробовать что-то вроде ie7.js. , который использует javascript, чтобы заставить эти вещи работать.

Если не считать, не похоже, что ie8 / ie7 его поддерживают .