CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerfirefox
Mames
Mames

Reputation: 85

css different font-size pixels on different browsers

I have the following css, it is a sideways arrow:

#change-pass-req::before {
  content: "\25C0";
  position: absolute;
  top: 55px;
  left: -18px;
  font-size: 25px;
  line-height: 15px;
  color: #ddd;
  text-shadow: none;
}

however, the arrow is super small in IE, medium sized in firefox, and huge in chrome... I have no idea why, pixels should be pixels right? I also tried putting a font-family but that changed nothing

Upvotes: 1

Views: 380

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272106

Apparently, you are trying to display a symbol (◀) which might not be present in the specified font family.

When this happens, browsers will use another font that contains the specified character. The symbol will appear different depending on the "fallback" font chosen by the browser and the font metrics.

Here are screenshots from Chrome and Firefox developer tools.

Chrome chose "Lucida Sans Unicode" font to display the symbol which is not listed in the element's font-family:

Chrome developer tools > Inspector > Rendered fonts

FireFox chose "Segoe UI Symbol" font which is fixed width and ~2px taller:

Firefox developer tools > Inspector > Fonts

Upvotes: 2

Related Questions