0

次のコードでのnth-child（2）の実装について質問があります。コードはChrome/Firefoxでうまく機能し、最初の子行列変換はIEでうまく機能します。ただし、2番目の子セレクターで問題が発生しました。IE8以下はn番目の子をサポートしていないことを認識していますが、selectizrとjQueryを使用して有効にしようとしましたが、私の状況では機能しない可能性があります（これらはサーバー側のjspファイルであり、ターゲットのdivが計算されるため） Javascriptを介して動的に）。

私はこれの回避策を探しています...私は2番目の子供だけを対象にする必要があります。

私は検索を行い、この投稿に出くわしました：IE8：nth-​​child and：before

私の状況で最初の子+リアのこの方法を適用する方法はありますか？

そうでない場合、このdivをターゲットにする方法について誰か提案がありますか？役立つ場合は、これを使用して、InfoVisツールキットから変更されたStackedAreaチャートの上のフローティングアグリゲートをターゲットにしています。

ありがとう

.fte-chart-container .node > div > :first-child {
font-family: Arial;
color: black;
font-size: 11px;
width: 35px !important;
transform:rotate(-80deg);
-ms-transform:rotate(-80deg); /* IE 9 */
-moz-transform:rotate(-80deg); /* Firefox */
-webkit-transform:rotate(-80deg); /* Safari and Chrome */
-o-transform:rotate(-80deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.17364817766693044,
    M12=0.984807753012208, M21=-0.984807753012208, M22=0.17364817766693044, 
    SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.17364817766693044,
        M12=0.984807753012208,
        M21=-0.984807753012208,
        M22=0.17364817766693044,
        SizingMethod='auto expand'); /* IE 6 and 7 */

}

.fte-chart-container .node > div > :nth-child(2) {
font-family: Arial;
color: black;
font-size: 10px;
transform:rotate(-60deg);
-ms-transform:rotate(-60deg); /* IE 9 */
-moz-transform:rotate(-60deg); /* Firefox */
-webkit-transform:rotate(-60deg); /* Safari and Chrome */
-o-transform:rotate(-60deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997, 
M12=0.8660254037844388, M21=-0.8660254037844388, M22=0.4999999999999997,   
SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.4999999999999997,
        M12=0.8660254037844388,
        M21=-0.8660254037844388,
        M22=0.4999999999999997,
        SizingMethod='auto expand'); /* IE 6 and 7 */

}
4

1 に答える 1

4

2 番目の子が正確にどうなるかわからない場合は、CSS で次のように:nth-child(2)置き換えることができます。:first-child + *

.fte-chart-container .node > div > :first-child + *

ただし*、複雑なセレクターの最後にあると、古いブラウザーではパフォーマンスが低下する可能性があるため、選択する要素を特定して、その要素が*どのタイプ/クラス/などに置き換えてもよいでしょう。

于 2013-02-05T08:35:56.403 に答える