瀏覽器之間的內聯元素高度不一致

Question

我有一個inline-flex元素由兩個內嵌塊元素結束。他們都是不同的高度，但我想把他們與他們的垂直中心。

在webkit中，通過將position: relative; top: 53px;應用於內嵌塊元素，可以實現這一點。但是，在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