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

Question

所以我正在使用 HTML 和 CSS 以及一些 JS 构建一个网站。我的主要浏览器一直是 Firefox，网站看起来也很完美。但是，在 Chrome 中打开后，我发现发生了很多变化。

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

2. 整个元素甚至都不会出现在 Chrome 上，我完全不知道为什么会发生这种情况或如何发生这种情况。

代码：

HTML

 <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;
}

在 Firefox 上看到的

在 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>

另外，您的代码与图片不匹配