为什么第n种类型的检测只在Firefox中失败?

Why does nth-of-type detection fail only with Firefox?

本文关键字：Firefox 失败 检测 种类 类型 为什么      更新时间：2023-09-26

我使用JavaScript/jQuery来检测浏览器是否支持nth-of-type CSS3伪类。在CSS中分配了一个5px的padding-left(见下面的代码)，如果JS/jQ可以通过$(document).ready()读取它，则检测成功。

在Chrome 26, IE9, Win Safari 5.1和Opera 12中都可以正常工作，所有这些都可以检测5px设置。但是，确实支持nth-of-type的Firefox 20将padding-left设置显示为0px，因此错误地失败了测试。为什么nth-of-type检测只在Firefox中失败?

示例代码。(摘自我的生产代码。如果您想尝试一下，也可以在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>

我认为问题是Firefox不应用填充表行元素;详情请参阅MDN:

[padding]适用于所有元素，除了table-row-group, table-header-group, table-footer-group, table-row, table-column-group和table-column

尝试将padding赋给第一个子单元格:

#checkPsdoClass1 tr.rows:nth-of-type(odd) td:first-child {
  padding-left: 5px;
}
相关文章：