Question

编辑：由于使用php构建，下面的代码不是最易读的。我已经包含了一个带有示例数据和更易读的HTML的codepen来更清楚地演示问题，可以在这里找到：codepen.io/anon/pen/PbeGya。

我正在尝试为我正在处理的网站创建一个flexbox标头。我已经知道它在chrome和firefox中运行得非常漂亮，但是当我在safari中查看它时，元素会落到它们包含div的底部并且在标题的背景之外。

我附上以下屏幕截图以显示问题：

以下是它应该如何显示以及它在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%;
  }
}

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

Answer 1

如果您要使用flexbox，请使用flexbox。整个顶部：50％翻译（Y）： - 50％正试图做Flexbox可以做的垂直居中。

从.menu-centering中删除它，然后以.menu为中心进行以下操作：

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

然后给出包含.grid宽度：100％;

那应该可以解决你的问题。

外面的Safari CSS弹性框项目包含

1 个答案: