IE11中Flexbox垂直对齐失效问题求助

Hey there! Let's get this IE11 alignment problem sorted out. After diving into your code, the main issues are a mix of flexbox compatibility quirks in IE11 and a small syntax error in your media queries that's throwing the whole layout off. Here's a breakdown of the fixes and optimized code to get everything working smoothly:

Key Issues Identified #

• Broken Media Query Syntax: Your @media rules were missing curly braces, so IE11 wasn't applying the flex-based column widths. That meant your columns weren't behaving as flex items in IE11, completely breaking the vertical alignment.
• IE11 Flexbox min-height Bug: IE11 has well-documented trouble recognizing min-height on flex containers as a reference for child alignment. We need to adjust how we handle vertical centering to work around this quirk.
• Missing Flex Alignment Properties: Some parent containers lacked explicit flex alignment rules that IE11 requires to center content properly.

Optimized Code #

HTML (no changes needed here—just keeping it for reference) #

<div class="cta">
  <div class="small-cta">
    <div class="l-container">
      <div class="l-row">
        <div class="l-col min-0--8">
          <div class="small-cta-left-container">
            <h1 class="small-cta-header">Ask the Experts</h1>
            <div class="small-cta-text__small">Get answers and insights from industry professionals and other experienced users.</div>
          </div>
        </div>
        <div class="l-col min-0--4">
          <div class="small-cta-right-container">
            <a class="small-cta-button" href="/login.html"><span class="cta-button__inner">Ask a Question</span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Updated CSS #

.cta {
  transition: transform .3s;
  backface-visibility: hidden;
  background: #373c44;
  min-height: 120px;
  /* Add flex container properties to establish a clear alignment context */
  display: flex;
  align-items: center;
}

.small-cta {
  color: #ffffff;
  line-height: 1.6;
  text-align: center;
  width: 100%;
  max-width: 692px;
  /* Use auto margin for reliable centering in the flex parent */
  margin: auto;
}

.l-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  max-width: 1190px;
}

/* Fixed media query syntax—added missing curly braces */
@media (min-width: 0px) {
  .min-0--8 {
    display: block;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .min-0--4 {
    display: block;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

@media (min-width: 768px) {
  .l-container {
    padding: 0 16px;
    max-width: 1202px;
  }
  .l-row {
    margin-left: -16px;
    margin-top: -16px;
  }
}

.l-row {
  display: flex;
  flex-flow: wrap;
  margin-top: -10px;
  margin-left: -10px;
  /* Ensure columns align their content vertically in the middle */
  align-items: center;
}

.small-cta-left-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  /* Replace min-height with height: 100% to work with IE11's flex behavior */
  height: 100%;
  padding: 20px 0; /* Add padding for better spacing on small screens */
}

h1.small-cta-header {
  font-size: 25px;
  text-align: left;
  margin-top: 0px;
}

.small-cta-text__small {
  color: #ffffff;
  font-size: 13px;
  margin-top: -5px;
  text-align: left;
  margin-bottom: 6px;
}

.small-cta-right-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  /* Replace min-height with height: 100% for IE11 compatibility */
  height: 100%;
  padding: 20px 0;
}

.small-cta-button {
  display: inline-flex;
  color: #ffffff;
  background: #ee3237;
  background: -moz-linear-gradient(left, #ee3237 0%, #f87c43 100%);
  background: -webkit-linear-gradient(left, #ee3237 0%,#f87c43 100%);
  background: linear-gradient(to right, #ee3237 0%,#f87c43 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee3237', endColorstr='#f87c43',GradientType=1 );
  transition: all .3s;
  border-radius: 2px;
  border-bottom: 3px solid #af171b;
  height: 44px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  max-width: 450px;
}

.cta-button__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  padding: 0 30px;
  font-weight: 600;
}

Why These Fixes Work #

1. Fixed Media Queries: The missing curly braces were causing IE11 to ignore the column width rules—now the columns behave as flex items as intended.
2. Flex Container on .cta: Adding display: flex and align-items: center gives IE11 a clear flex context to center the child .small-cta vertically.
3. height: 100% Instead of min-height: IE11 struggles with min-height in flex child containers, so using height: 100% ensures the containers inherit the full height from their flex parent, allowing proper vertical alignment of the text and button.
4. align-items: center on .l-row: This ensures both columns align their content vertically in the middle, even in IE11.
5. Padding for Small Screens: Added padding to the left/right containers to prevent content from touching the edges on mobile, improving overall usability.

This should make your CTA section align perfectly in both modern browsers and IE11!

内容的提问来源于stack exchange，提问作者Raymond Samuels