0

次のコードを記述して、最初と最後の列にそれぞれ左マージンと右マージンがない3列のレイアウトを作成しました（定義上、3つの列は動的に生成されるのとまったく同じクラスになります-最後を参照してください段落）：

#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 Explorer7および8で機能しないことです。IE（この場合）で使用できる唯一の疑似クラスは「最初の子」ですが、これによって3番目と最後の列の右マージンが削除されるわけではありません。このコードをIE7/8で動作させる方法を知っている人はいますか？

重要な注意点：3つの列はクエリループを介して動的に生成されるため、各列のクラス属性は同じになります。

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 セレクターに追加します。スクリプトを詰まらせずに同じクラスに複数のスタイル ルールを設定できるため、私はダミー クラスを使用することを好みますが、セレクターごとにルールが 1 つしかないため、どの方法を使用しても 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 関数を記述して、疑似クラスに一致し、適切なスタイルをそれらに追加することができます。Javascript ファイルを IE 条件付きコメントにロードすれば、準備完了です。

于 2010-03-09T02:29:43.683 に答える