【续】抓个Firefox的小辫子，jQuery表示不背这黑锅，Chrome,Edge,IE8-11继续围观中 - 三生石(2)_H5之家

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <style> *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> </head> <body> <fieldset> <legend>fieldset</legend> </fieldset> <script> $(function () { var elem = $('#fieldset1')[0]; var styles = window.getComputedStyle(elem); var val= jQuery.css(elem, "paddingTop", true, styles); elem.style.height = (200 - val) + "px"; alert(parseInt($('#fieldset1').height(), 10)); }); </script> </body> </html>　　

Firefox下问题依然存在，很明显是在 jQuery.css 中出现的问题，跟踪到 jQuery 的源代码：

说白了，也很简单。通过 styles.getPropertyValue(name) || styles[name] 来获取某个CSS样式的值。

下面，再次更新示例，去除 jQuery 的相关代码：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <style> *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> </head> <body> <fieldset> <legend>fieldset</legend> </fieldset> <script> $(function () { var elem = $('#fieldset1')[0]; var styles = window.getComputedStyle(elem); var val = parseFloat(styles.getPropertyValue("paddingTop") || styles["paddingTop"]); elem.style.height = (200 - val) + "px"; alert(parseInt($('#fieldset1').height(), 10)); }); </script> </body> </html>　　　　

Firefox问题依然存在，而这里面我们设置 fieldset 的高度根本没用到 jQuery，只是调用了系统的 getCompotedStyle 方法等！！！

中间插播一个广告：

#######################################

# 9 年只做一件事

# 由三生石上亲自打造的 FineUI 控件库，现已支持 ASP.NET Core 2.0，跨平台 Windows、Mac、Linux 都能用！

# 在线示例：

########################################

广告结束，请继续....

上面还不是最简单，下面我们从页面中完全排除 jQuery ，3 行代码就能重现问题：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> *, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </style> </head> <body> <fieldset> <legend>fieldset</legend> </fieldset> <script> window.onload = function() { var elem = document.getElementById('fieldset1'); window.getComputedStyle(elem)["paddingTop"]; elem.style.height = "200px"; }; </script> </body> </html>　　

在Chrome和Firefox下的显示效果对比（后面是Chrome，前面是Firefox）：

小结

的的确确，这是 Firefox Quantum(v57) 以及很多老版本的BUG，和 jQuery 没有关系，jQuery只在做了该做的事情，碰巧遇到这个 Firefox 的BUG而已。

这个BUG在Firefox下重现需要满足如下几个条件：

在这 3 个条件下，调用JS代码 window.getComputedStyle(elem)["paddingTop"] 之后再设置 fieldset 标签的高度，页面上不会更新！

解决办法请看我的上一篇文章：【原创】抓个Firefox的小辫子，围观群众有：Chrome、Edge、IE8-11

喜欢三石的文章，你就给个推荐呗！