CODEWITHSUNDEEP
htmlcsssafari
Helio Albano
Helio Albano

Reputation: 917

CSS line-height renders differently on safari

The following code renders as expected in Firefox and Chrome browsers, but on Safari it renders with an unwanted white line between the borders.

HTML:

<span>Text here</span>

CSS:

span {
  border-top: 3.3em solid #ff9933;
  border-right: 3.3em solid #ff9933;
  border-bottom: 3.3em solid #ff9933;
  border-left: 3.3em solid transparent;
  color: white;
  display: inline-block;
  font-size: 1em;
  line-height: 0;
}

Firefox and Chrome:

enter image description here

Safari:

enter image description here

Does anybody know why this is happening?

JSFiddle

Upvotes: 4

Views: 3262

Answers (2)

Brigitte Y
Brigitte Y

Reputation: 11

It seems like a problem of proportion, the border 3.3em can't cover totally the text with font-size 1em; you can change the border for 3.5em or you can change the font-size for 0.8em.

span {
border-top: 3.3em solid #ff9933;
border-right: 3.3em solid #ff9933;
border-bottom: 3.3em solid #ff9933;
border-left: 3.3em solid transparent;
color: white;
display: inline-block;
font-size: 0.8em;
line-height: 0;
}
<span>Text here</span>

Upvotes: 1

nicael
nicael

Reputation: 18997

Looks like Safari finds your line height (if zero line height can be called height :)) unsatisfactory for such a small border. Does work fine with 3.5em.

span {
border-top: 3.5em solid #ff9933;
border-right: 3.5em solid #ff9933;
border-bottom: 3.5em solid #ff9933;
border-left: 3.5em solid transparent;
color: white;
display: inline-block;
font-size: 1em;
line-height: 0;
}
<span>Text here</span>

Upvotes: 0

Related Questions