如何让 Flexbox 定位在 Safari 10.0 中工作？

Question

在将此问题标记为重复之前，请先看看这个 JS Fiddle：https://jsfiddle.net/751cg8d1/10/

HTML：

 <div class="opLandingContainer">
      <ul class="opWelcomeNavBar affix">
        <li class="opWelcomeNavBarLogo" >
          <a href="/">
            <img class="ui image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
          </a>
        </li>
        <li style="right: 0; position: absolute" class="opWelcomeNavBarItem nondropdown">
          <a style="padding-right: 0" href="/sign-up">Sign Up</a>
          <a href="/sign-in">Sign In</a>
        </li>
      </ul>
    </div>

CSS

.opWelcomeNavBarLogo {
    position:absolute;
    width:225px;
    display:inline-block;
 }
.opWelcomeNavBarLogo img {
    height: 68px;
}
@media(max-width:600px) {
    .opWelcomeNavBarLogo {
        width: 125px !important;
    }
    .opWelcomeNavBarLogo img {
        height: 38px !important;
    }
}
.opWelcomeNavBar.affix a {
    color:black;
}
.opWelcomeNavBar.affix {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.opWelcomeNavBar{
    border:0;
    top:0;
    right:0;
    left:0;
    height:90px;
    z-index:1;
    margin:0;
    position:fixed;
    list-style-type: none;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    /*border: 0 none;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}
.opWelcomeNavBar a:hover{
    color: #ababab;
    text-decoration:none;
}
.opWelcomeNavBar a {
    color:white;
    font-size:1.3em;
    text-decoration:none;
    height:50px;
    padding:15px;
    border:2px solid transparent;
}

此代码的目标是将容器中的某些项目垂直居中（在本例中，顶部导航栏中的某些菜单项）。

如果您在 Chrome 中查看小提琴，则一切正常。但是，在 Safari 10 中，项目不是垂直居中的。我尝试使用每种类型的供应商前缀（在这个版本的 Safari 中应该不需要），但这些更改似乎都不起作用。根据我的阅读，这个版本的 Safari 应该完全支持 flex 定位规范。我还在这里查看了常见的 flex 错误：https://github.com/philipwalton/flexbugs，但这些似乎都不适用于我在此示例中看到的内容。

Chrome 中的正确视图：

Safari 10 中的视图不正确：

Answer 1

问题是你绝对是在定位弹性项目。

在 flex 容器中，position: absolute 从 flex 格式化上下文中删除项目。

只需使用 flex 属性来对齐您的项目。你不需要position: absolute。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

Answer 2

查看.opWelcomeNavBar a 规则以及height 和display 属性。

它适用于 Safari。

但是小菜单的 CSS 太多了！

更喜欢使用float 而不是position 或Bootstrap Navbar

.opWelcomeNavBarLogo {
  position: absolute;
  width: 225px;
  display: inline-block;
}

.opWelcomeNavBarLogo img {
  height: 68px;
}

@media(max-width:600px) {
  .opWelcomeNavBarLogo {
    width: 125px !important;
  }
  .opWelcomeNavBarLogo img {
    height: 38px !important;
  }
}

.opWelcomeNavBar {
  border: 0;
  top: 0;
  right: 0;
  left: 0;
  height: 90px;
  z-index: 1;
  margin: 0;
  position: fixed;
  list-style-type: none;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.opWelcomeNavBar.affix {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.opWelcomeNavBar a {
  color: white;
  font-size: 1.3em;
  text-decoration: none;
  padding: 15px;
  border: 2px solid transparent;
  
  height: 100%;
  display: inline-block;
}

.opWelcomeNavBar.affix a {
  color: black;
}

.opWelcomeNavBar a:hover {
  color: #ababab;
  text-decoration: none;
}

<div class="opLandingContainer">
  <ul class="opWelcomeNavBar affix">
    <li class="opWelcomeNavBarLogo">
      <a href="/">
        <img class="ui image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
      </a>
    </li>
    <li style="right: 0; position: absolute;" class="opWelcomeNavBarItem nondropdown">
      <a href="/sign-up">Sign Up</a>
      <a href="/sign-in">Sign In</a>
    </li>
  </ul>
</div>

PS：paddingRight 不是 CSS ！是 JS，使用 padding-right 并避免使用 style 属性。

PS2 : 您可以使用 Stackoverfow sn-p 并在发布前清理您的 CSS！