-1
EDIT：以下のコードはphpで構築されているために読みやすいものではありません。私はサンプルデータとより読みやすいHTMLコードを含んでいます。ここにcodepen.io/anon/pen/PbeGyaがあります。Safari CSSフレックスボックスの項目が含まれています
私が取り組んでいるウェブサイトのフレックスボックスヘッダーを作成しようとしています。私はそれがクロムとファイアフォックスでうまく動作するところまで達しましたが、私がサファリで見ると、その要素は含まれている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 ???があります）、コードスニペットはレンダリングされません。これをコードペインまたはjsfiddleに入れて助けてもらえるといいですね。 – i7nvd
http://codepen.io/anon/pen/PbeGya ここには基本的なスタイルのコードペンがあります。あなたが私が参照している振る舞いをサファリで開くときにわかるように。私はまた、サンプルデータ –