6

:nth-childセレクターを IE7/8 で動作させることができません。

これは私のコードの実例です（Chromeで動作します）

以下は、私が使用しているCSSとHTMLです。

CSS:

#price-list {
    width:98%;
    padding:1%;
    border:white 1px solid;
    margin:0 auto;
    overflow:hidden;
}        
#price-list h4 {
    padding-top:20px; 
    font-weight:400;  
    padding-bottom:5px;
}        
#price-list ul { 
    width:100%; 
    margin-bottom:10px; 
    overflow:hidden; 
}      
#price-list li{
    line-height:1.5em;
    border-bottom:1px  dashed #C9F;
    float:left;
    display:inline;
    padding-top:5px; 
    padding-bottom:5px;
    text-align:center;          
}        
#price-list li strong { 
    color:#C9F; 
    font-weight:normal;
}        
#double-taxi li:nth-child(odd) { 
    width:80%;
    text-align:left; 
}
#double-taxi li:nth-child(even) { 
    width:20%;
}

HTML:

<div id="price-list">
   <ul id="double-taxi">            
      <li><h4>North Goa</h4><strong>(Distance kms)</strong></li><li><h4>Non A/C</h4>Rs <strong>(UK &pound;)</strong></li>
      <li>Aldona <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
      <li>Asnora <strong>(15 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
      <li>Bicholim <strong>(21 kms)</strong></li><li>420 Rs <strong> (&pound;5)</strong></li>
      <li>Camurlim <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
      <li>Colvale <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
   </ul>
     We DO NOT provide a taxi service. The Exchange Rate used to calculate UKP was 80Rs to the UKP and was rounded  up to whole pound.
</div>

どんな助けでも大歓迎です。

4

3 に答える 3

9

これ:nth-child は、IE7/IE8 ではサポートされていないためです。

この問題の解決策の 1 つは、 Selectivizrを使用することです。

「Selectivizr は、Internet Explorer 6 ～ 8 で CSS3 疑似クラスと属性セレクターをエミュレートする JavaScript ユーティリティです。」

Selectivizr スクリプトを含める必要があるだけです。まだ使用していない場合は、使用する JavaScript ライブラリ (jQuery、Mootools など) を決定すると、:nth-childセレクターがサポートされます (他のさまざまなライブラリの中でも)。 IE6 から IE8 までの疑似セレクター/属性セレクター)。

編集：

コメントへの返信として、Selectivizr のセットアップ方法と使用方法を示す簡単なチュートリアルを以下に示します。

于 2013-06-01T13:51:48.677 に答える
7

以下の例はあなたに役立つかもしれません

//For first child
// equivalent to li:nth-child(1)
li:first-child a {
    border-top: 5px solid red;
}

//For second child
// equivalent to li:nth-child(2)
li:first-child + li a {
    border-top: 5px solid blue;
}

//For third child
// equivalent to li:nth-child(3)
 li:first-child + li + li a {
    border-top: 5px solid green;
}​
于 2013-09-24T13:48:40.353 に答える
0

不足している機能には、selectivizer などのポリフィルを使用します。

  1. http://selectivizr.com/downloads/selectivizr-1.0.2.zipの selectivizr.com からダウンロードします。
  2. 解凍し、ファイルをプロジェクトの app/assets/javascripts の下に配置します
  3. つまり<!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="selectivizr-min.js"></script><![endif]-->、レイアウトの application.js ファイルでのみ、アプリで参照してください。また...

  4. アセット パイプラインの場合、gem 'selectivizr-rails' を Gemfile に追加してから、バンドル インストールを行うことができます。https://github.com/jhubert/selectivizr-railsから宝石を取得します

    次に、レイアウトの head タグに次を追加します。

    <!--[if (gte IE 6)&(lte IE 8)]> = javascript_include_tag 'selectivizr' <![endif]-->

  5. 通常通り進む

于 2013-06-01T15:10:26.583 に答える