Question

我正在处理某些代码，这些代码似乎在chrome，firefox等上显示得很好但在IE 11上却没有（惊喜）。基本上标题/号召性用语文本和按钮应该是垂直对齐的（它在Chrome中表现不错）但在IE中内容却停留在页面顶部？

我已经使用flexbox进行了操作，但我没有想法......有人可以查看此页面的来源并找出更好的方法吗？

如果有人有更好的CSS可以投入，真的很感激！

感谢您的帮助

<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>

    .cta {
    transition: transform .3s;
    backface-visibility: hidden;
    background: #373c44;
    min-height: 120px;
}

.small-cta {
    color: #ffffff;
    line-height: 1.6;
    text-align: center;
    width: 100%;
    max-width: 692px;
    margin: 0 auto;
}

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

@media (min-width: 0px)
.min-0--8 {
    display: block;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

@media (min-width: 0px)
.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;
}

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

.l-row {
    display: flex;
    flex-flow: wrap;
    margin-top: -10px;
    margin-left: -10px;
}

.small-cta-left-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    min-height: 120px;
}

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 {
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    min-height: 120px;
    display: flex;
}

.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;
}

Answer 1

根据can I use：

部分支持 [针对IE 11] 是由于存在大量错误（请参阅已知问题）

所以也许你应该找到另一种方法来做到这一点！

Answer 2

Flexbox无法完全使用IE ...您可以在父级上使用display: table，在子级上使用display: table-cell;vertical-align:middle。

Flexbox垂直对齐在IE 11中不起作用

2 个答案: