https://codepen.io/andrewdstrain/pen/mdbaVex
Проблема, о которой я говорю, заключается в том, что ширина окна просмотра показывает кнопку навигации (меню) в правом верхнем углу.
Я использую flexboxсоздать навигационный заголовок.CSS правильно отображается в Safari, Firefox, Chrome и Edge на Windows, MacOS и Android.Но iOS (iPhone) - это почти правильно рендерится.iOS просто накладывает элемент section поверх элемента header.
Сначала я подумал, что это флексбокс.Но добавление в -webkit- ничего не меняет.Мало того, но iOS рендерит CSS-код flexbox - просто попробуйте изменить его, и он отразит изменения.
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%;
}
}