javascript - Why does nth-of-type detection fail only with Firefox? -
i'm using javascript/jquery detect if browsers support nth-of-type css3 pseudo-class. 5px padding-left assigned in css (see code below) , detection succeeds if js/jq can read via $(document).ready().
everything works fine chrome 26, ie9, win safari 5.1, , opera 12, of detect 5px setting. however, firefox 20, indeed support nth-of-type, shows padding-left setting 0px , incorrectly fails test. why nth-of-type detection fail firefox?
example code. (stripped down production code. available @ http://jsfiddle.net/jma7777/znzbn/1/ if want experiment it. open console see padding-left detection results.)
<!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 style assigned :nth-of-type(odd) if ($('#checkpsdoclass2').css('padding-left') !== '5px') { $('#pseudoclassdemo').html('<p>your browser not support <code>:nth-of-type</code> pseudo-class.'); } console.log($('#checkpsdoclass2').css('padding-left')); // modern browsers log 5px except firefox logs 0px console.log($('#checkpsdoclass1 tr.rows:nth-of-type(odd)').css('padding-left')); // modern browsers log 5px except firefox logs 0px console.log($('tr.rows:nth-of-type(odd)').css('padding-left')); // modern browsers log 5px except firefox logs 0px }); </script> </head> <body> <table id="checkpsdoclass1"><tr id="checkpsdoclass2" class="rows"><td><p id="checkpdsoelmnt">this table used test if browser supports nth-of-type pseudo-class.</p></td></tr></table> </body> </html>
i think problem firefox doesn't apply padding table row elements; see mdn details:
[padding] applies elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group , table-column
try assigning padding first child cell instead:
#checkpsdoclass1 tr.rows:nth-of-type(odd) td:first-child { padding-left: 5px; } 
Comments
Post a Comment