Intron

I posted an article yesterday 【 Grab one Firefox The pigtail of , Around the masses :Chrome,Edge,IE8-11
<http://www.cnblogs.com/sanshi/p/7920103.html>
】, Mentioned a Firefox Problems with many versions , The same test page Chrome,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>  
stay Firefox Lower display effect :



stay Chrome Lower display effect :



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

* jQuery.height Function does not contain padding,border and margin Of
* stay box-sizing: border-box; Under the rules , adopt style.height The value set is the padding and border Of
The difference between the two is reflected in the final setting fieldset 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 , The following analysis jQuery This knowledge is used in source code .  

 

The problem really seems to have disappeared , For a moment , I almost want to Firefox 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 years jQuery, But really debugging jQuery Code, but not many times , after all jQuery The code of , To look for one BUG It's hard .

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

1. Entry function



 

2. First access 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) Yes, no padding and border Of , Finally, we have to pass
$('#fieldset1')[0].style.height To set , So we need to calculate first fieldset Up and down padding and border.

 

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 to style function :



 

here value The value is already the calculated value , It contains the 200px, And up and down padding and border 17.6px, total 217.6px

Next through 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 code below is as like as two peas. :
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 suspect it is try-catch What the hell , 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>  
stay Firefox 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 for :



 



 

put in plain language , It's also very simple . adopt styles.getPropertyValue(name) || styles[name] To get a CSS Value of style .

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
Methods, etc !!!

 

 

Insert an ad in the middle :

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

#  9 Do one thing in

#  Made by Sansheng stone FineUI Control library , Now supported ASP.NET Core 2.0, Cross platform Windows,Mac,Linux Can be used !

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

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

End of advertisement , 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>  
  

stay Chrome and Firefox Display effect comparison under ( Back there Chrome, The front is Firefox):



 

Summary

really , This is Firefox Quantum(v57) And many older versions BUG, and jQuery It doesn't matter. ,jQuery Just doing the right thing , I happened to meet this
Firefox Of BUG nothing more .

this BUG stay Firefox The following conditions should be met for the next reproduction :

* set up CSS Global properties :box-sizing: border-box
* HTML Label as :fieldset( No problem with other labels , such as div It's normal )
* fieldset Absolute positioning :position:absolute
Here 3 Conditions , call JS code  window.getComputedStyle(elem)["paddingTop"] Set later fieldset
Height of label , Not updated on page !

 

See my last article for solutions :【 original 】 Grab one Firefox The pigtail of , 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 !