https://codepen.io/andrewdstrain/pen/mdbaVex
我要说的问题是查看窗口的宽度在右上方显示导航（菜单）按钮。
我正在使用flexbox创建导航标题。 CSS可以在Windows，macOS和Android上的Safari，Firefox，Chrome和Edge中正常显示。但是iOS（iPhone）-几乎可以正确呈现。 iOS只是将section元素覆盖在header元素之上。
起初，我认为这是flexbox的东西。但是添加-webkit-东西似乎并没有改变任何东西。不仅如此，iOS还在渲染flexbox CSS-只需尝试对其进行更改，它将反映出更改。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox Header</title>
<link rel="stylesheet" type="text/css" href="index.css" media="screen">
</head>
<body id="index" class="home">
<header id="banner" class="body">
<a href="#" class="site-name">FlexBox Header</a>
<input type="checkbox" id="menu-button-input">
<label id="menu-button" for="menu-button-input"><span class="icon-bar">☰</span></label>
<nav id="menu"><div class="container top-menu">
<div class="container-item active"><a href="#">Home</a></div>
<div class="container-item"><a href="#">Categories</a></div>
<div class="container-item"><a href="#">Archive</a></div>
</div></nav><!-- /#menu -->
</header><!-- /#banner -->
<section id="content">
<h2>All articles</h2>
<ol id="post-list">
<li><article class="hentry">
<header> <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to Dude, You're Getting a Dell">Dude, You're Getting a Dell</a></h2> </header>
<footer class="post-info">
<time class="published" datetime="2019-03-06T19:00:00-05:00"> 2019-03-06 </time>
<address class="vcard author">By
<a class="url fn" href="#">Blaztek</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content"> <p class="first last">My first experience with Dell customer service.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header> <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to How To Find The Python Version Number">How To Find The Python Version Number</a></h2> </header>
<footer class="post-info">
<time class="published" datetime="2019-02-26T08:27:00-05:00"> 2019-02-26 </time>
<address class="vcard author">By
<a class="url fn" href="#">Blaztek</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content"> <p class="first last">How to find the Python version number.</p>
</div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header> <h2 class="entry-title"><a href="#" rel="bookmark" title="Permalink to First Post">First Post</a></h2> </header>
<footer class="post-info">
<time class="published" datetime="2019-02-24T10:16:00-05:00"> 2019-02-24 </time>
<address class="vcard author">By
<a class="url fn" href="#">Blaztek</a>
</address>
</footer><!-- /.post-info -->
<div class="entry-content"> <p>What are you doing that is geeky? What am I doing that is geeky? Geek
activities that I do are posted whenever I get the chance. Please check back
periodically to see what's new.</p>
</div><!-- /.entry-content -->
</article></li>
</ol><!-- /#posts-list -->
</section><!-- /#content -->
<footer id="contentinfo" class="body">
<address id="about" class="vcard body">
Proudly powered by <a href="http://getpelican.com/">Pelican</a>,
which takes great advantage of <a href="http://python.org">Python</a>.
</address><!-- /#about -->
</footer><!-- /#contentinfo -->
<script>
window.addEventListener('load', (event) => {
document.getElementById('menu-button-input').checked = false;
});
</script>
</body>
</html>
index.css
/*
* CSS for the skeleton of the upper header
*/
.home {
display: flex;
flex-direction: column;
}
#banner {
align-items: baseline;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#banner #menu-button-input {
display: none;
}
#banner #menu {
display: none;
}
#banner #menu .container {
display: flex;
flex-direction: column;
justify-content: flex-end;
list-style: none;
}
#banner #menu-button-input:checked ~ #menu {
display: block;
}
@media only screen and (min-width: 48em) {
#banner {
flex-wrap: nowrap;
justify-content: flex-start;
}
#banner #menu-button {
display: none;
}
#banner #menu {
display: block;
width: 100%;
}
#banner #menu .container {
flex-direction: row;
}
}
/*
* CSS for the theme's visual styles
*/
.home {
color: rgb(51, 51, 51);
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 0.875em;
margin: 0em;
}
html, body {
height: 100%;
}
header, section {
padding: 0em 1.25em;
}
a {
color: rgb(56, 117, 215);
text-decoration: none;
}
/* from elegant.css */
.site-name {
font-family: "Monaco", "Inconsolata", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, Monospace;
}
#banner {
background-image: linear-gradient(rgb(255, 255, 255), rgb(242, 242, 242));
border: 0.0625em solid rgb(212, 212, 212);
box-shadow: rgba(0, 0, 0, 0.0980392) 0em 0.0625em 0.625em;
}
#banner a {
color: rgb(119, 119, 119);
}
#banner a.site-name {
display: block;
font-size: 1.25em;
padding: 0.625em 0em;
text-shadow: rgb(255, 255, 255) 0px 0.0625em 0px;
}
#banner #menu-button {
background-image: linear-gradient(rgb(242, 242, 242), rgb(229, 229, 229));
border: 0.0625em solid rgb(204, 204, 204);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 0.25em;
box-shadow: inset 0 0.0625em 0 rgba(255,255,255,.1), 0 0.0625em 0 rgba(255,255,255,.075);
color: rgba(0, 0, 0, 0.25);
font-size: 1.1875em;
height: 1.625em;
position: relative;
right: 0.375em;
text-align: center;
top: -0.125em;
width: 2.3125em;
}
#banner #menu-button .icon-bar {
position: relative;
top: 0.125em;
}
#banner #menu {
width: 100%;
}
#banner #menu .top-menu .container-item a {
display: block;
padding: 0.9375em;
text-shadow: 0 0.0625em 0 rgb(255, 255, 255);
}
#banner #menu .top-menu .container-item.active a {
background-color: rgb(229, 229, 229);
border-radius: 0.1875em;
box-shadow: inset 0 0.1875em 0.5em rgba(0, 0, 0, 0.125);
color: rgb(55,55,55);
}
/*
* elegant.css
*
* .top-menu li a
*/
.top-menu .container-item a {
font-weight: bold;
}
footer {
padding: 0em 0.1875em;
}
@media only screen and (min-width: 48em) {
header {
padding: 0em 3em;
}
section {
padding: 0% 20% 0% 25%;
}
}
答案 0 :(得分：0)
如果您要向#banner提供min-height
将此样式添加到CSS
#banner {
min-height: 45px;
align-items: center;
}
更新的解决方案：https://jsfiddle.net/7tyrhxbd/
答案 1 :(得分：0)
有两种不同的方法可以解决这个问题。也就是说，修复其中一个（不能同时解决），即可解决问题。
我发现此CSS块存在问题：
html, body {
height: 100%;
}
是html标签在iOS中将问题搞砸了。当我摆脱它时，iOS的显示就像其他操作系统一样。
我正在使用该块将页脚始终保持在底部。
另一个问题是这个问题（类.home仅在body元素上）：
.home {
display: flex;
flex-direction: column;
}
如果我删除flexbox，它会起作用。同样，页脚不再总是位于底部-但这并不是很难解决。
我的代码将body标记视为div元素。因此，我决定实际制作一个包装元素。这提供了一种使页脚实际上始终位于页面底部的简单方法。它还允许保留用于主要元素的列flexbox-尽管似乎没有任何充分的理由。我可能最终会把它拿出来。
可以在此处查看此修复程序：