-1
編輯：下面的代碼是不是最可讀的，因爲正在用PHP構造。我已經包含了一個帶有示例數據和更多可讀HTML的codepen，以更清晰地展示可以找到的問題：codepen.io/anon/pen/PbeGya here。Safari瀏覽器CSS彈性盒子項目外面包含
我正在嘗試爲我正在處理的網站創建flexbox標頭。我已經達到了它在Chrome和Firefox中運行得非常好的地步，但是當我在safari中查看它時，元素會掉到它們包含的div的底部，並且位於標題背景之外。
我附上下面的截圖顯示的問題：
下面是它應該如何看，它並如何看待Chrome和Firefox： enter image description here
這裏是它如何工作的野生動物園： 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%;
}
}請點我在正確的方向，我現在已經花了幾個小時尋找野生動物園特定CSS的錯誤特別是與柔性盒相關，我似乎無法找到任何我認爲可能是原因的東西。
這個標記似乎真的是多餘的，我發現很難遵循（grid_row裏面有一個grid_row），並且你的代碼片段不會呈現。如果你可以把它放在一個codepen或jsfiddle中來幫助你，那會很好。 – i7nvd
http://codepen.io/anon/pen/PbeGya 這裏是基本風格的codepen。正如你可以看到它在safari中打開時所指的行爲。我還用示例數據 –