Control Web object display different implementation methods

There are two ways to implement hiding objects in an HTML page: one is through the display property of the Style object, and the other through the visibility property. There is a microsecond difference between the two, and the visibility attribute specifies whether the element is visible, even if the invisible element occupies the space of the page, in contrast, the invisible element set by the display property does not occupy the space of the page.

(Original image)

(Set visibility property)

(Set display properties)

From the above can be clearly seen between the layout differences between the two properties, but after setting the display property, there is a page display dislocation (ie normal, chrome and FF display dislocation), what is the cause of the situation, after some search, originally with display set the value of the , let's take a look at the possible values for display:

In the test code, we set the display value set to block, so that different browsers appear different display results, according to the capture analysis, ie set block and Table-row after the display results, but chrome and FF is a big difference, In the case of Chrome, for example, the tr,chrome gives it an internal style value, which is Table-row, which is set to block, which shows an error, so we just need to keep the default value, that is, just delete the display property, so that they are all at the default value. There will be no browser incompatibility issues.

"Test Code"