为什么“ align-items：基线”在Internet Explorer中不起作用？

问题描述

我无法在VUE应用程序中的Chrome，Edge，IE和Firefox之间创建一致的FlexBox。我拥有的CSS在Chrome，Edge和Firefox中运行良好，但在Internet Explorer 11中却无法使用。

我有一个标头，其中显示了两个容器，其中一个包含两个徽标，另一个包含一个链接列表和带有链接的下拉列表。 这是我模板的简化轮廓

<template>
    <div>
        <div>
            <header>
                <nav class="navbar navbar-expand-lg navbar-light header" v-if="!paymentIsSelected">
                  <div class="branding-wrapper">
                    <a v-bind:href="this.url">
                    <div class="logo-icon">
                    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.4 129.32"></svg>
                    </div>
                    <div class="logo-text">
                     <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.41 53.09"></svg>
                    </div>
                    </a>
                  </div>
                  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                     <ul class="navbar-nav menu">
                        <li class="nav-item"></li>
                        <li class="nav-item"></li>
                        <li class="nav-item"></li>
                        <li class="nav-item"></li>
                        <li class="nav-item"></li>
                     </ul>
                  </div>
               </nav>
            </header>
         </div>
     </div>
</template>

这是mi css

.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline !important;
  flex-wrap: Nowrap;
  align-items: flex-end;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  width: 100vw;
  max-width: 1200px;
}

.branding-wrapper {
  display: block;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.branding-wrapper a {
  text-decoration: none;
}

.branding-wrapper .logo-icon {
  width: 60px;
  margin-right: -25px;
}

.branding-wrapper .logo-text {
  width: 150px;
}

.branding-wrapper .logo-icon,.branding-wrapper .logo-text {
  display: inline-block;
}

.branding-wrapper .logo-icon svg,.branding-wrapper .logo-text svg {
  display: block;
  max-width: 100%;
  fill: $secondaryColor;
}

除了不应用“ align-items：baseline”之外，在“ branding-wrapper”容器中，我对两个徽标都应用了一个内联块，并且它们在IE之外的所有浏览器中均显示为底部对齐。

我已经搜索了对该主题的其他引用，并且尝试按所示声明页眉的高度，但是它不起作用，并且还在index.html中包含脚本，但也不起作用。

我在做什么错了？

感谢您的时间和帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）