'Crossbrowser CSS when adjusting a WordPress theme

enter image description here

enter image description here

My CSS:

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

HTML:

<p class="n-drop-cap">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

This is a case of adjusting a ready made WordPress theme for my needs. So, I have not resetted CSS styles. I decided that maybe it is not necessary in this case.

Anyway, my styles has not proved to be cross browser. In Chrome it looks satisfactorily (uppermost screen shot). In Firefox it falls apart.

Web page: https://galina.xyz/krasota/strizhki-na-korotkie-volosy/

Could you help me understand how to make everything crossbrowser?

css


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions