元素在Chrome中表现得很奇怪，但在Firefox中却不是？

Question

所以我用HTML和CSS以及一些JS建立了一个网站。我的主要浏览器一直是火狐，网站看起来也很完美。然而，在Chrome打开它之后，我注意到它发生了很大变化。

1. 字体看起来不一样:我尝试了CSS重置和其他已知的技术，但是我不知道为什么字体看起来会改变。你们在解决这个问题时有什么建议？

1. --一个完整的元素甚至没有出现在Chrome上，我完全不知道为什么会出现，也不知道怎么会出现。--

代码：

 <div class="masked-copy texture-orange big-type">
               <p><span class="firstline">Coffee </span><span class="secondline">'N'</span> <span class="thirdline">Code!</span></p>
               <!--
                  
               -->
               <div class="explanation">
                  <h1>
                     <div class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</div>
                  </h1>
                  <!-- Filter: https://css-tricks.com/gooey-effect/ -->
                  <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
                     <defs>
                        <filter id="goo">
                           <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                           <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
                           <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
                        </filter>
                     </defs>
                  </svg>
               </div>
            </div>

CSS

  .texture-orange {
    color: #e5895f;
    background-image: url('https://www.apple.com/v/iphone-xr/a/images/overview/copy_texture_4_large.jpg');
  }

.big-type { 
  /* Copied almost wholesale from the Apple site CSS; changed the font-stack */
  font-size: 60px;
  height: 60vh;
  line-height: 1.0625; /* The height Apple used to tighten up the spacing a bit. */
  font-weight: 600; /* Nice, chunky, bold! */
  font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
}

.masked-copy { 
  /* This is it! Magic: */
  -webkit-background-clip: text;
  color: transparent !important;
  
}

.project3 .goo{
  position: relative;
  top: -160px;
  left: -30px;
}
.project3 .explanation .goo #newline::before{
  content: '\a';
  white-space: pre;
}

如火狐所见

​

从Chrome上可以看到

​

Answer 1

您必须将<h1>标记嵌套到<div>标记中：

​

 <div class="masked-copy texture-orange big-type">
               <p><span class="firstline">Coffee </span><span class="secondline">'N'</span> <span class="thirdline">Code!</span></p>
               <!--
                  
               -->
               <div class="explanation">
                  <div>
                     <h1 class="goo" contenteditable="true">Elected as a <i>Senior Project Lead</i> <br>at the Biggest Club<br> involved in Technology and Coding: <span id = 'newline'>Coffee</span> 'N' Code.</h1>
                  </div>
                  <!-- Filter: https://css-tricks.com/gooey-effect/ -->
                  <svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
                     <defs>
                        <filter id="goo">
                           <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                           <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
                           <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
                        </filter>
                     </defs>
                  </svg>
               </div>
            </div>

而且，您的代码与图片不匹配

​