Safari CSS flex box items outside containing

Question

编辑：下面的代码不是最易读的，因为是用 php 构造的。我已经包含了一个带有示例数据和更易读的代码笔 HTML 以更清楚地说明问题，可以找到：codepen。io/anon/pen/PbeGya 这里。

我正在尝试为我正在使用的网站创建一个 flexbox header。我已经达到了它在 chrome 和 firefox 中完美运行的地步，但是当我在 safari 中查看它时，元素会掉到它们包含的 div 的底部并且在 [ 的背景之外=48=]。

我附上以下截图来说明问题：

下面是它应该的样子以及它在 chrome 和 firefox 上的样子： enter image description here

这是它在 safari 上的表现： enter image description here

据我所知，这是相关代码。请记住，无论如何我都不是 css 专家，而且在过去的几个小时里，我对代码进行了很多修改，试图弄清楚发生了什么。

<div id="uberbar">
<div class="menu-centering">
    <div class="grid">
        <div class="grid__row">
            <div class="grid_row">
                <a href="/" id="logopic">
                    <img src="redacted">
                </a>
                <a href="/" id="logopic-scroll">
                    <img src="redacted">
                </a>
            </div>
            <?php 
            $html_construction = "";
            $array_menu = wp_get_nav_menu_items('Test');
            foreach ($array_menu as $array_item) {
                if( $array_item->menu_item_parent == 0 ) {
                    $html_construction .= ("<div class='grid__item'> <a href='" . $array_item->url . "'>" . $array_item->title . "</a>");
                    if( is_null(get_nav_menu_item_children($array_item->ID, $array_menu)) == false ) {
                        $children_array = get_nav_menu_item_children($array_item->ID, $array_menu);
                        $html_construction .= "<div class='dropdown-content'>";
                        foreach ($children_array as $child) {
                            $html_construction .= ("<a href='" . $child->url . "'>" . $child->title . "</a>");
                        };
                        $html_construction .= "</div></div>";
                    } else {
                        $html_construction .= "</div>";
                    };
                };
            };
            echo $html_construction;
            ?>
            <div class="grid__item demo-menu"><a href="#bottom">Free Demo</a></div>                     
        </div>
    </div>
</div>

而 CSS:

#uberbar  { 
  background:#505050; 
  padding:10px 0px; 
  position:fixed; 
  top:0; 
  left:0; 
  z-index:2000; 
  width:100%;
  height: 5em;
  margin-left: auto;
  margin-right: auto;
}

.menu-centering {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom:auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

#uberbar a {
  color:white;

    }
  #logopic {
    margin-right: 15em;
  }

  #logopic-scroll {
    display:none;
    padding-top: 10px;
    margin-right: 15em;
  }

  .grid {
}

.grid__row {
  display: flex;
  flex-direction: row;
}

.grid__item {
  flex: 1;
  padding: 12px;
  max-width: 20%;
  text-align: center;
  -webkit-box-flex: 1; 

}

.grid__item:hover .dropdown-content {
    display: block;
}


@media all and ( min-width: 480px ) {

  .grid__row--sm {
    flex-direction: row;
  }

}

@media all and ( min-width: 720px ) {

  .grid__row--md {
    flex-direction: row;
  }

}

@media all and ( min-width: 960px ) {

  .grid__row--lg {
    flex-direction: row;
  }

}


.demo-menu {
  background-color: #27a8df;
  border-radius: 15px;
  z-index: 1;
  }

.demo-menu-small {
  background-color: transparent;
  color: #27a8df;
}

#uberbar .demo-menu-small a {
  color: #27a8df;
  font-weight: 400;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
  }

  .dropdown-content a {
    background-color: #505050;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    max-width: 200px;

}

  .dropdown-content a:hover {
    background-color: #898989;
}

_::-webkit-full-page-media, _:future, :root .safari_only {

.grid__row {
  padding-bottom: 10px;
} 

}
.mobile-header-solution {
  display: none;
}

@media all and (max-width : 768px) {
  #uberbar {
    display:none;
  }
  .mobile-header-solution {
    display: block;
  }
}

@media all and (max-width : 1300px) {
  #logopic, #logopic-scroll { 
    margin-right: 10em;
    margin-left: 3em;
  }

  #logopic-scroll {
    border: solid 1px red;
  }

  .grid__item {
    max-width: 12%;
  }
}

请给我指出正确的方向，我现在已经花了几个小时查看 safari 特定的 CSS 错误，尤其是与 flexboxes 有关的错误，但我似乎找不到任何我认为可能的错误原因。

Answer 1

如果你打算使用 flexbox，就使用 flexbox。这整个 top: 50% translate(Y):-50% 正在尝试做 flexbox 可以做的垂直居中。

从您的 .menu-centering 中删除它，并为 .menu-centering 提供以下内容：

display: flex;
justify-content: space-between;
align-items: center;
height: 100%;

然后给出包含.grid width:100%;

这应该可以解决您的问题。

Safari CSS flex box items outside containing

Safari CSS flex box items going outside containing

html

css

safari

webkit

flexbox