1
在下面的代码片段中，我复制了我在实际项目中遇到的错误 - 如果您单击链接到#works（在导航栏中标记为Ipsum），您会看到“投资组合”部分上方的内容消失。我怀疑它与在网站的颜色版本中制作条纹对角线背景渐变工作所需的解决方法有关，但我不知道从哪里开始，从未从未观察过此行为。点击锚标签会导致内容从页面上消失
<div id="container">
<section id="btw">
<h2>Lorem ipsum</h2>
<p>Mauris gravida lobortis nisl eget scelerisque. Proin id congue ipsum.</p>
</section>
<section id="works">
<h2>Portfolio</h2>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
</section>
</div>
上面的HTML显示消失的元素（#btw），链接指向的#works元素以及包含的div。下面的CSS就像我所知道的那样，是唯一对这个问题有影响的布局代码。
html {
font-size:3.3vw;
font-family:"Libre Franklin";
}
ul {
list-style-type:none;
}
li, #banner-secondary {
font-weight:200;
text-align:center;
}
a, label {
text-decoration:none;
font-size:1.5rem;
}
.banner-column, h2 {
font-size:2rem;
}
.banner-column:nth-child(2n+1) {
font-weight:100;
}
#about p, .banner-column:nth-child(2n), #banner-secondary a, #contact p, aside p {
font-family:"Libre Baskerville";
}
#banner-secondary, #btw p, #btw a, input[type=submit], footer a {
font-size:1.125rem;
}
#btw h2, aside h3 {
font-size:2.25rem;
}
h2 {
font-weight:600;
}
.banner-column:nth-child(2n), #btw p {
text-align:right;
}
#works, footer, aside h2 {
text-align:center;
}
#works div h3, aside h2 {
font-size:2.75rem;
}
@media (min-width:640px) {
html {
font-size:2.5vw;
}
#btw h2 {
font-size:2.5rem;
}
#btw p, #btw a {
font-size:1.275rem;
}
#about {
columns:9rem 3;
}
}
@media (min-width:768px) {
html {
font-size:2.25vw;
}
#btw p, #btw a {
font-size:1.4rem;
}
}
@media (min-width:880px) {
.banner-column {
font-size:2.125rem;
}
#banner-secondary {
font-size:1.25rem;
}
#banner-secondary a {
font-size:2rem;
}
#about {
columns:1;
}
}
@media (min-width:1024px) {
html {
font-size:1.75vw;
}
}
@media (min-width:1280px) {
html {
font-size:1.4vw;
}
}
/* Layout Styles */
* {
box-sizing:border-box;
}
body, ul, #banner, #btw, #btw h2, #btw p, #btw p::before, #works, #works div, #contact h2, aside h2, aside h3 {
margin:0;
}
#banner, #banner-primary, #banner-secondary, .banner-column, footer {
display:flex;
}
nav {
padding:0.25rem;
}
ul {
padding:0;
display:flex;
justify-content:space-around;
}
li {
display:inline-block;
width:22.75%;
padding:8px 0;
border-left:8px solid;
}
#banner {
width:100%;
}
#banner-primary {
padding:0.5rem 1rem;
flex:3;
flex-direction:row;
}
#banner-secondary {
flex:1;
padding:0.5rem;
flex-direction:column;
justify-content:space-around;
border-left:0.25rem solid;
}
#about {
margin-top:2rem;
padding:0 2rem;
}
#about h2 {
margin:0 1rem 0 0;
padding:0 0.5rem;
float:left;
border-left:0.5rem solid;
}
p {
margin-top:0;
}
#container {
overflow: hidden;
}
#btw {
display:flex;
}
.banner-column {
flex-direction:column;
}
#btw h2 {
flex:3;
padding:1rem 1rem 1rem 1.5rem;
}
#btw p {
display:block;
flex:7;
padding:0.75rem;
position:relative;
}
#btw p::before {
content: '';
position: absolute;
top: 100%;
left: 0px;
width: 80%;
height: 500vh;
transform: rotate(45deg) translate(0%,-50vw);
transform-origin: left top;
z-index:-1;
}
#works {
position: relative;
display:flex;
flex-flow:row wrap;
}
#works h2 {
margin:1rem 1rem 0 0;
flex:1 100%;
}
#works div {
flex:1 50%;
}
#contact {
padding:0.75rem;
border-right:1.75rem solid;
}
#works h2, #contact h2, #contact p {
padding:0 0.5rem;
}
#contactform, footer {
padding:0.5rem;
}
label {
display:block;
}
input, textarea {
border:none;
width:85%;
padding:0.25rem;
margin:0.5rem 0;
}
input {
height:2rem;
}
input[type=submit] {
width:6rem;
}
footer {
flex-flow:row wrap;
}
footer a {
flex:1
}
footer span {
margin:0.5rem 0;
flex:1 100%;
}
aside {
display:none;
}
aside h2 {
margin:1rem 0 0 0;
}
aside span {
display:block;
margin:0.25rem;
}
.article-pre {
margin:0;
display:flex;
flex-direction:column;
justify-content:center;
}
@media (min-width:640px) {
#banner-primary {
flex:5;
justify-content:flex-end;
}
#banner-secondary {
margin-right:3rem;
flex:2;
}
#about {
margin-bottom:1rem;
}
#about h2 {
float:none;
}
#btw h2 {
margin-left:1rem;
}
}
@media (min-width:880px) {
#flex-content {
display:flex;
}
nav {
flex:0 0 7.5rem;
margin:0;
padding:0;
}
#nav {
flex-direction:column;
justify-content:space-around;
position:fixed;
height:100%;
margin:0;
}
li {
margin:0;
height:100%;
width:100%;
padding:1rem;
}
#banner-primary {
flex:3;
}
#banner-secondary {
flex:1;
margin-right:2rem;
}
#about h2 {
float:left;
}
footer {
margin-left:7rem;
}
}
@media (min-width:1024px) {
.wrapper {
flex:7;
}
aside {
display:flex;
flex-direction:column;
justify-content:flex-start;
flex:4;
border-left:0.5rem solid;
}
aside h2 {
flex:1;
}
aside p {
flex:;
}
aside a {
flex:1;
}
#banner {
flex-direction:column;
}
#banner-primary {
justify-content:center;
}
#banner-secondary {
border-left:none;
border-top:0.25rem solid;
margin-right:0;
padding:0.5rem;
}
#contact {
border:none;
padding:1rem;
}
}
@media (min-width:1280px) {
#banner {
flex-direction:row;
}
#banner-secondary {
border-top:none;
border-left:0.25rem solid;
flex:1.5;
}
.wrapper {
flex:6;
}
}<div id="flex-content">
<nav>
<ul id="nav">
<li><a href="#">Lorem</a></li>
<li><a href="#works">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit</a></li>
</ul>
</nav>
<div class="wrapper">
<section id="banner">
<div id="banner-primary">
<div class="banner-column">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div class="banner-column">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
<div id="banner-secondary">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis sapien ut metus euismod suscipit.</span>
</div>
</section>
<section id="about">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis sapien ut metus euismod suscipit. Curabitur accumsan nunc in gravida elementum. Ut tempus vestibulum lacus, eu porttitor augue fringilla at. Phasellus ac nunc nisi. Aliquam et luctus nunc, vitae varius ipsum. Pellentesque volutpat tellus vel ex accumsan volutpat. Praesent tincidunt purus a sem interdum, a egestas enim condimentum. Pellentesque tempus massa id est efficitur semper. Sed scelerisque efficitur convallis. Aenean porttitor ex et facilisis vulputate. Morbi nec vestibulum ligula, vitae semper lectus. Nam congue iaculis nulla. Nunc nibh dolor, suscipit vitae luctus quis, aliquet eget quam. Duis mollis nisl et dui porta faucibus. Donec viverra, elit vitae pulvinar tristique, ante sem semper risus, sed scelerisque est justo et est.
Maecenas congue, lectus quis egestas tristique, urna justo molestie lorem, quis convallis nunc urna nec urna. Ut eu vestibulum metus, eget sagittis mi. Cras mollis mi lectus, pellentesque semper dui dignissim et. Fusce nec urna a metus dictum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec justo odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dictum tristique lorem eget mollis.</p>
</section>
<div id="container">
<section id="btw">
<h2>Lorem ipsum</h2>
<p>Mauris gravida lobortis nisl eget scelerisque. Proin id congue ipsum.</p>
</section>
<section id="works">
<h2>Portfolio</h2>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
<div>
<h3>Content Here</h3>
</div>
</section>
</div>
<section id="contact">
<h2>Lorem Ipsum</h2>
<p>Duis a lacus et urna hendrerit varius sed sit amet nisi. Quisque ligula erat, pulvinar ut iaculis eu, sollicitudin in lacus. Nulla sit amet tortor suscipit, tincidunt nisi ac, semper lacus. Cras pretium turpis ut leo consectetur pellentesque. Cras tincidunt sed elit et cursus. Mauris vitae dui sem. Cras mattis eu enim et vestibulum. Sed mattis, dolor ut posuere molestie, libero nisi pharetra lorem, a blandit orci lacus eget mi.</p>
<form id="contactform">
<div class="input-group">
<label>Your Name</label>
<input>
</div>
<div class="input-group">
<label>Your Email</label>
<input>
</div>
<div class="input-group">
<label>Message</label>
<textarea rows="6">Lorem Ipsum</textarea>
</div>
<input type="submit" value="Send">
</section>
</div>
<aside>
<h2>Latest Article</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis sapien ut metus euismod suscipit. Curabitur accumsan nunc in gravida elementum. Ut tempus vestibulum lacus, eu porttitor augue fringilla at. Phasellus ac nunc nisi. Aliquam et luctus nunc, vitae varius ipsum. Pellentesque volutpat tellus vel ex accumsan volutpat. Praesent tincidunt purus a sem interdum, a egestas enim condimentum. Pellentesque tempus massa id est efficitur semper. Sed scelerisque efficitur convallis. Aenean porttitor ex et facilisis vulputate. Morbi nec vestibulum ligula, vitae semper lectus. Nam congue iaculis nulla. Nunc nibh dolor, suscipit vitae luctus quis, aliquet eget quam. Duis mollis nisl et dui porta faucibus. Donec viverra, elit vitae pulvinar tristique, ante sem semper risus, sed scelerisque est justo et est.
Maecenas congue, lectus quis egestas tristique, urna justo molestie lorem, quis convallis nunc urna nec urna. Ut eu vestibulum metus, eget sagittis mi. Cras mollis mi lectus, pellentesque semper dui dignissim et. Fusce nec urna a metus dictum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin nec justo odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dictum tristique lorem eget mollis.
Mauris gravida lobortis nisl eget scelerisque. Proin id congue ipsum. Duis volutpat arcu sed mauris laoreet commodo. Morbi condimentum eros id arcu venenatis, et ullamcorper erat semper. Nam vel pretium ipsum. Phasellus semper metus vitae faucibus maximus. Donec lacinia sapien nec mi fermentum placerat. Vestibulum id nibh vel libero tristique porta. Phasellus sapien erat, porttitor vel elementum ac, imperdiet non turpis. Fusce pharetra, velit vitae fermentum semper, tellus metus imperdiet magna, in tristique magna justo eget ante. Etiam ultrices at est quis rhoncus. Maecenas interdum, enim sed consequat accumsan, erat nulla interdum mi, iaculis sagittis lacus justo dignissim ligula. Vestibulum suscipit sed arcu sed sodales.
Duis a lacus et urna hendrerit varius sed sit amet nisi. Quisque ligula erat, pulvinar ut iaculis eu, sollicitudin in lacus. Nulla sit amet tortor suscipit, tincidunt nisi ac, semper lacus. Cras pretium turpis ut leo consectetur pellentesque. Cras tincidunt sed elit et cursus. Mauris vitae dui sem. Cras mattis eu enim et vestibulum. Sed mattis, dolor ut posuere molestie, libero nisi pharetra lorem, a blandit orci lacus eget mi.
Curabitur sodales elementum ornare. Curabitur sit amet ultricies mi. Praesent lacinia sagittis ante, sed consequat sem dignissim vehicula. Curabitur facilisis dui consectetur nunc tempus, at lobortis tortor pellentesque. Suspendisse tristique lacus ut erat fringilla, vitae tempor quam gravida. Proin dignissim massa sed mi aliquam, gravida luctus risus sagittis. Mauris id ligula vel dui semper condimentum. Praesent viverra est vitae lectus blandit, quis ornare leo volutpat. Vestibulum fringilla gravida nulla, id bibendum metus dapibus pellentesque. Nunc condimentum ipsum ac lectus ullamcorper tempor. Duis at elit nec urna hendrerit pulvinar quis sit amet tortor. Integer id dictum ligula. Duis porttitor dolor velit, ut congue erat bibendum quis. Aliquam blandit in leo feugiat sollicitudin.
Donec lorem sapien, molestie sed porta et, pellentesque eget ipsum. Suspendisse posuere arcu quis quam rutrum, vel luctus purus feugiat. In et ante id lectus gravida gravida. Ut at ante sit amet velit aliquet placerat non vitae odio. Maecenas nec aliquet dolor, eget consequat ex. Fusce condimentum magna vel metus consequat, sit amet egestas dui euismod. Vestibulum efficitur elit id nibh tempor viverra. Nullam urna felis, molestie eget sagittis vel, viverra lacinia est. Quisque in lacus ac diam sagittis pellentesque. Praesent ut mattis lorem. Phasellus egestas sed dui at condimentum. Aenean ex velit, porttitor at volutpat vel, congue vel mi.
Donec nibh sem, vestibulum in lectus non, maximus laoreet nisi. Aenean vitae quam libero. Praesent pharetra libero metus. Pellentesque fermentum feugiat ante. Aenean eget leo at nisi rutrum aliquam quis ac orci. Suspendisse faucibus nisl a nisi semper pretium ut tempor nisi. Integer nunc arcu, porttitor sed feugiat egestas, cursus vel erat. Nulla placerat nulla sed tincidunt sagittis. Pellentesque ut urna non mauris finibus cursus mattis quis lorem. Nulla facilisi. In nec sem rhoncus, auctor ipsum sit amet, elementum enim. Morbi efficitur dapibus leo vitae finibus. Integer tincidunt eros turpis, at consequat lorem feugiat vitae. Maecenas sem metus, suscipit congue quam in, aliquet malesuada sapien.
Ut semper, quam vitae accumsan congue, eros neque dictum mauris, sit amet lobortis massa quam pharetra dolor. Integer quam libero, interdum auctor vulputate quis, varius ac magna. Phasellus facilisis pulvinar dignissim. Nunc congue pellentesque dui, eget varius enim ornare vitae. Vestibulum sit amet purus lobortis, ullamcorper dui id, elementum quam. Nulla facilisi. Nam dignissim rhoncus erat, a rutrum massa vehicula et. Etiam vulputate erat urna, ut euismod mauris sodales vitae. Aenean accumsan dui maximus, hendrerit odio tincidunt, vehicula mauris. Cras porttitor justo in sem pulvinar congue. Praesent fermentum elementum mi, a accumsan augue posuere sed. Praesent et blandit felis. Nam nec auctor justo.
Vivamus vel lorem in augue aliquet aliquam ullamcorper a diam. Phasellus gravida felis nec tempor finibus. Etiam iaculis magna ut nisi eleifend, a efficitur massa tristique. Etiam condimentum tristique sagittis. Nullam vestibulum tempor cursus. Maecenas porta, purus pellentesque ornare pellentesque, turpis lorem mollis risus, quis mollis felis velit ac neque. Nam tempor id arcu eget scelerisque.
Aliquam erat volutpat. Nullam vestibulum, sem a tristique laoreet, augue neque ultricies dui, eu tempus neque mi et elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis laoreet placerat turpis, at mattis elit. Sed eu ex vitae orci rhoncus maximus. Nullam pellentesque sapien vel mi auctor, convallis venenatis elit feugiat. In in sodales erat. Curabitur vitae leo viverra, vestibulum turpis vitae, rhoncus elit. Integer consequat molestie dui ut bibendum. In imperdiet elit nec varius placerat.
</aside>
</div>
<footer>
<p>Cash me ousside | Howbow dah</p>
</footer>
我无法重现该问题，我在Mac OS X上使用Chrome 56.0.2924.87 –
请在问题本身而不是第三方网站上提供[mcve]中的所有相关代码。 –
Win 10 Firefox 51.0.1中的问题是显而易见的 – Zze