1

nth-of-typeブラウザーがCSS3 疑似クラスをサポートしているかどうかを検出するために JavaScript/jQuery を使用しています。CSS で5pxpadding-leftが割り当てられ (以下のコードを参照)、JS/jQ が を介してそれを読み取れる場合、検出は成功し$(document).ready()ます。

Chrome 26、IE9、Win Safari 5.1、Opera 12 ではすべて正常に動作し、これらはすべて 5px 設定を検出します。ただし、実際に をサポートしている Firefox 20 ではnth-of-type、padding-left設定が 0px と表示されるため、誤ってテストに失敗します。nth-of-typeFirefox でのみ検出に失敗するのはなぜですか?

サンプルコード。(私の製品コードから削除されました。これを試してみたい場合は、 http://jsfiddle.net/jma7777/ZnzBN/1/padding-leftでも入手できます。コンソールを開いて検出結果を確認してください。)

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Pseudo Class Nth-of-Type Detector</title>
<style>
#checkPsdoClass1 tr.rows:nth-of-type(odd) {
  padding-left: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // Checks for style assigned to :nth-of-type(odd)
  if ($('#checkPsdoClass2').css('padding-left') !== '5px') {
    $('#pseudoClassDemo').html('<p>Your browser does not support the <code>:nth-of-type</code> pseudo-class.');
  }
  console.log($('#checkPsdoClass2').css('padding-left'));  // Modern browsers log 5px except Firefox which logs 0px
  console.log($('#checkPsdoClass1 tr.rows:nth-of-type(odd)').css('padding-left'));  // Modern browsers log 5px except Firefox which logs 0px
  console.log($('tr.rows:nth-of-type(odd)').css('padding-left'));  // Modern browsers log 5px except Firefox which logs 0px
});
</script>
</head>

<body>
<table id="checkPsdoClass1"><tr id="checkPsdoClass2" class="rows"><td><p id="checkPdsoElmnt">This table is used to test if the browser supports the nth-of-type pseudo-class.</p></td></tr></table>
</body>

</html>
4

1 に答える 1

3

問題は、Firefox がテーブルの行要素にパディングを適用しないことだと思います。詳細はMDNを参照してください:

[パディング] は、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、および table-column を除くすべての要素に適用されます

代わりに、最初の子セルにパディングを割り当ててみてください。

#checkPsdoClass1 tr.rows:nth-of-type(odd) td:first-child {
  padding-left: 5px;
}
于 2013-05-09T21:55:35.430 に答える