Why Do Fieldsets Refuse to Shrink in Firefox?

Minimum Width Issue:

In Firefox and older versions of WebKit,

elements inherit a minimum width of "min-content," preventing them from shrinking below the width of their content. This issue can lead to problems when you expect

elements to resize based on their parent container's width.

Solution (for WebKit and Firefox 53 ):

Override the default behavior by setting min-width: 0; on the

.

Solution (for Firefox Pre-53):

To make the

display correctly in earlier versions of Firefox, change its display property to table-cell. To hide this fix from other browsers, use @-moz-document:

@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
  }
}

Explanation:

This issue arises from inconsistencies in how browsers handle

s and how elements behave with different display properties. Firefox's rendering engine enforces a minimum width on

s unless they are rendered as table elements.

Caution:

While using @-moz-document is safe in this specific case, avoid using it to target Firefox in general as it has been deprecated.

The above is the detailed content of Why Do Fieldsets Refuse to Shrink in Firefox?. For more information, please follow other related articles on the PHP Chinese website!