Question

在将此问题标记为重复之前，请先查看此JS小提琴：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容器中，library(magrittr) z2 %>% as.ts %>% as.zoo %>% na.approx z2 %>% as.ts %>% as.zoo %>% aggregate(as.yearmon, c) %>% na.approx从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

＆＃13;

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

＆＃13;

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

＆＃13;

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

PS2：你可以使用Stackoverfow片段，请在发帖前清理你的CSS！

如何让Flexbox定位在Safari 10.0中运行？

2 个答案: