title: Crossbrowser CSS when adjusting a WordPress theme
body: <p><a href="https://i.stack.imgur.com/CC52Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CC52Y.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/g5UeP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g5UeP.png" alt="enter image description here" /></a></p>
  <p>My CSS:</p>
  <pre><code>.n-drop-cap::first-letter {
      box-sizing: content-box;
      font-size: 4rem;
      font-weight: bold;
      color: var(--color-1);
      float: left;
      height: auto;
      width: auto;
      margin-right: 0.8rem;
    margin-top: -1rem;
    margin-bottom: -2rem;
    display: block;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;p class=&quot;n-drop-cap&quot;&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&lt;/p&gt;
  </code></pre>
  <p>This is <strong>a case of adjusting a ready made WordPress theme</strong> for my needs. So, I have not resetted CSS styles. I decided that maybe it is not necessary in this case.</p>
  <p>Anyway, my styles has not proved to be cross browser. In Chrome it looks satisfactorily (uppermost screen shot). <strong>In Firefox it falls apart.</strong></p>
  <p>Web page: <a href="https://galina.xyz/krasota/strizhki-na-korotkie-volosy/" rel="nofollow noreferrer">https://galina.xyz/krasota/strizhki-na-korotkie-volosy/</a></p>
  <p>Could you help me understand how to make everything crossbrowser?</p>