How Can I Make Flexbox Work Consistently Across Browsers, Including Internet Explorer 11?

Flexbox and Internet Explorer 11: Display:flex in ?

In the pursuit of leaving behind "floaty" layouts and embracing CSS flexbox, one may encounter compatibility issues in Internet Explorer 11. While major browsers generally support flexbox, IE11 presents certain challenges.

The "Sticky Footer" Conundrum

The "Sticky Footer" example from "Solved by Flexbox" encountered a snag in IE11. By adding display:flex to the element and width:100% to the

, however, the issue was resolved. Understanding the rationale behind this workaround is crucial.

The default values for flex in IE10 and IE11 diverge from the draft spec, resulting in inconsistent behavior when encountered with CSS declarations like flex:1. Modifying this to 1 0 0 ensures compatibility across browsers.

Tackling the "Media Object" Enigma

The "Media Object" example faces an additional hurdle in IE11. Various attempts to manipulate the CSS have yielded no success. Unfortunately, a clean solution for achieving functionality in IE11 remains elusive.

Compatibility Considerations

The aforementioned workaround for the "Sticky Footer" example may inadvertently disrupt Firefox's rendering. To address this, employ hacks that specifically target Mozilla, as seen below:

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

Browser vendors may interpret flexbox differently due to its Candidate status in the W3C. However, this should stabilize as the standard matures. Any alternative solutions would be greatly appreciated.

The above is the detailed content of How Can I Make Flexbox Work Consistently Across Browsers, Including Internet Explorer 11?. For more information, please follow other related articles on the PHP Chinese website!