Introduction

I posted an article yesterday【 Grab aFirefox Pigtail, Around the masses:Chrome,Edge,IE8-11
<http://www.cnblogs.com/sanshi/p/7920103.html>
】, Mentioned aFirefox Problems with many versions, The same test pageChrome,Edge,IE8-11 It's all right down here.

In the comments, Net friend @Blackheart My attention was drawn to the reply of:



 

I tested it again according to the method provided by netizens:
<!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 id="fieldset1"
style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
<legend>fieldset</legend> </fieldset> <script> $(function () { //
$('#fieldset1').height(200); document.getElementById("fieldset1").style.height
= "200px"; alert(parseInt($('#fieldset1').height(), 10)); }); </script> </body>
</html>  
stayFirefox Lower display effect:



stayChrome Lower display effect:



Prompt in screenshot 181px, Instead of 200px, That's exactly right:

* jQuery.height Function does not containpadding,border andmargin Of
* staybox-sizing: border-box; Under Rule, adoptstyle.height The value set is thepadding andborder Of
The difference between the two is reflected in the final settingfieldset Different height of:
$('#fieldset1').height(200);


 

 
document.getElementById("fieldset1").style.height = "200px";
  

 

Of course, The difference between the two settings is not the focus of this article. But it's the key to the problem, Following analysisjQuery This knowledge is used in source code.  

 

The problem really seems to have disappeared, For a moment, I almost want toFirefox The problem of jQuery 了, But it's true?

 

thorough jQuery source code

It is said that: Nothing ventured, no gains, Let's debug it jQuery.height function.

Although it took more than ten yearsjQuery, But really debugging jQuery Code, but not many times, after all jQuery The code of, To look for oneBUG All difficult.

There's no way this time, Now that the doubt is here, we have to start:

1. Entry function



 

2. First entry style function:

 

 

3. Get into set function

 

 

At this time, if we can execute it augmentWidthOrHeight:

 

You get a negative value, Face before passing jQuery.height
We know,jQuery.height(200) Does not containpadding andborder Of, In the end, it's still going to pass
$('#fieldset1')[0].style.height Set up, So we need to calculate first fieldset Up and downpadding andborder.

 

4. Get into augmentWidthOrHeight function:



 

This screenshot can confirm our previous assumption, adopt jQuery.css Function to get
paddingTop,borderTopWidth,paddingBottom,borderBottomWidth Four values.

 

5. Finally back style function:



 

here value The value is already the calculated value, It contains the 200px, And up and downpadding andborder 17.6px, Total 217.6px

Pass below style[ name ] = value, take 217.6px Set to fieldset node:



here, Let's take a closer look at the next three variables, put in plain language, The following code is exactly the same.:
document.getElementById("fieldset1").style.height = "217.6px";
 

That's strange, Since jQuery.height It's also called in the end style.height, Why use it directly style.height No problem with the settings?  

 

Full recovery

First, I doubt it. try-catch Ghost, It turned out that it wasn't. according to jQuery.height Call process of, Let's recreate it:
<!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 id="fieldset1"
style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
<legend>fieldset</legend> </fieldset> <script> $(function () { var elem =
$('#fieldset1')[0]; var view = elem.ownerDocument.defaultView; if (!view ||
!view.opener) { view = window; } var styles = view.getComputedStyle(elem); var
val = 0; val -= jQuery.css(elem, "paddingTop", true, styles); val -=
jQuery.css(elem, "borderTopWidth", true, styles); val -= jQuery.css(elem,
"paddingBottom", true, styles); val -= jQuery.css(elem, "borderBottomWidth",
true, styles); elem.style.height = (200 - val) + "px";
alert(parseInt($('#fieldset1').height(), 10)); }); </script> </body> </html>  
stayFirefox You can reproduce the problem:

 

Simplify the code:
<!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 id="fieldset1"
style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
<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 The following problems still exist, Obviously jQuery.css Problems in, Track to jQuery Source code:



 



 

put in plain language, It's also very simple.. adopt styles.getPropertyValue(name) || styles[name] To get aCSS Style value.

Below, Update example again, Remove jQuery Related codes of:
<!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 id="fieldset1"
style="border:solid 1px red;width:500px;position:absolute;top:0;left:0;">
<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 Problems still exist, And here we set fieldset We didn't use the height of jQuery, Just called the system's getCompotedStyle
Such method!!!

 

 

Insert an ad in the middle:

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

#  9 Do one thing in

#  Made by Sansheng stone FineUI Control library, Support now ASP.NET Core 2.0, Cross platform Windows,Mac,Linux Can use!

#  Online example:http://core.fineui.com/ <http://core.fineui.com/>

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

End of advertising, Please continue....

 

 

It's not the easiest, Let's completely exclude it from the page jQuery ,3 Lines of code can reproduce the problem:
<!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 id="fieldset1" style="border:solid 1px
red;width:500px;position:absolute;top:0;left:0;"> <legend>fieldset</legend>
</fieldset> <script> window.onload = function() { var elem =
document.getElementById('fieldset1');
window.getComputedStyle(elem)["paddingTop"]; elem.style.height = "200px"; };
</script> </body> </html>  
  

stayChrome andFirefox Display effect comparison under( Behind isChrome, Ahead isFirefox):



 

Summary

Really, This is Firefox Quantum(v57) And many older versionsBUG, and jQuery It doesn't matter.jQuery Just doing the right thing, I happened to meet this
Firefox OfBUG Nothing more.

thisBUG stayFirefox The following conditions should be met for the next reproduction:

* Set upCSS Global attribute:box-sizing: border-box
* HTML Label is:fieldset( No problem with other labels, such asdiv It's normal)
* fieldset Absolute positioning:position:absolute
Here 3 Under certain conditions, callJS Code window.getComputedStyle(elem)["paddingTop"] Set later fieldset
Height of label, Not updated on page!

 

See my last article for solutions:【 Original】 Grab aFirefox Pigtail, Around the masses:Chrome,Edge,IE8-11
<http://www.cnblogs.com/sanshi/p/7920103.html>

 

Give the thumbs-up

Like Sanshi's articles, You give me a recommendation!