浏览器之间的内联元素高度不一致

Question

我有一个以两个内联块元素结尾的 inline-flex 元素。它们都是不同的高度，但我想将它们对齐到它们的垂直中心。

在 webkit 中，这可以通过将 position: relative; top: 53px; 应用于 inline-block 元素来实现。但是，在 Firefox 中，这会将内联块放在我想要的位置下方。

去掉top的偏移我可以看到元素的默认位置在webkit和firefox中是完全不同的。

这是一个小提琴：https://jsfiddle.net/ralphonz/p9s1pjtd/29/

这是我的 HTML：

<div class="newsletter-navigation" role="navigation">
  <div class="arrow prev-arrow">
    <svg width="100%" height="100%" viewBox="0 0 20 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path id="Arrow-Right-Icon" d="M18.64 32.359L6.323 18.569 18.64 4.78c.923-1.035.923-2.711 0-3.744-.924-1.035-2.421-1.035-3.344 0L1.356 16.642c-.474.531-.701 1.23-.688 1.927-.013.695.214 1.396.688 1.927l13.94 15.606c.923 1.033 2.42 1.033 3.344 0 .923-1.034.923-2.71 0-3.743z" fill="#6d4272"></path></svg>
  </div>
  <ul class="nav nav-pills">
     <li class="archive-year">2017
       <ul class="nav"> 
        <li class="nav-item">Item 1</li>
        <li class="nav-item">Item 2</li>
        <li class="nav-item">Item 3</li>
        <li class="nav-item">Item 4</li>
        <li class="nav-item">Item 5</li>
       </ul>
     </li>
     <li class="archive-year">2016
       <ul class="nav"> 
        <li class="nav-item">Item 1</li>
        <li class="nav-item">Item 2</li>
        <li class="nav-item">Item 3</li>
        <li class="nav-item">Item 4</li>
        <li class="nav-item">Item 5</li>
       </ul>
     </li>
  </ul>
  <div class="arrow next-arrow">
    <svg width="100%" height="100%" viewBox="0 0 20 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path id="Arrow-Right-Icon" d="M18.64 32.359L6.323 18.569 18.64 4.78c.923-1.035.923-2.711 0-3.744-.924-1.035-2.421-1.035-3.344 0L1.356 16.642c-.474.531-.701 1.23-.688 1.927-.013.695.214 1.396.688 1.927l13.94 15.606c.923 1.033 2.42 1.033 3.344 0 .923-1.034.923-2.71 0-3.743z" fill="#6d4272"></path></svg>
  </div>
</div>

这是我的 SCSS：

.newsletter-navigation {
    width: 100vw;
    position: relative;
    margin-bottom: 2em;
    padding: 0 2em 2em;
    background-color: rgb(230,230,230);
    .arrow {
      display: inline-block;
      position: relative;
      top: 53px;
      width: 19px;
      height: 37px;
      cursor: pointer;
      color: rgb(109,66,114);
    }
    .prev-arrow {
      margin-right: .5em;
    }
    .next-arrow {
      margin-left: .5em;
      transform: rotate(180deg);
    }
    ul.nav {
      display: inline-flex;
      flex-wrap: nowrap;
      width: 100%;
      overflow: scroll;
      li {
        width: 25vw;
        margin-right: 1em;
        padding: 1em 2em;
        background-color: rgb(31,148,195);
        border-radius:.5em;
        color: #fff;
        ul {
          padding: 0;
        }
      }
      .nav-item {
        text-align: center;
      }
      .archive-year {
        width: auto;
        margin: 0;
        padding: 0;
        background-color: transparent;
        color: rgb(128, 128, 128);
      }
    }
    &>ul.nav {
      width: 85%;
    }
  }

如何获得一致的跨浏览器结果并实现垂直居中对齐的目标？

Answer 1

既然你一直在使用 flexbox，不妨用它来垂直对齐你的元素。

#container {
  align-items: center;
  display: flex;
}

.small {
  background: #fcc;
}

.big {
  background: #ccf;
  font-size: 2em;
}

<div id="container">
  <span class="small">flexbox</span>
  <span class="big">vertical</span>
  <span class="small">alignment</span>
</div>

Updated fiddle