CSS line height affects safari in different ways

Question

The following code appears as expected in Firefox and Chrome, but in Safari it displays an unwanted white line between 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:

Safari:

Does anyone know why this is happening?

Jsfiddle

Answer 1

It seems that the proportion problem, the 3.3em border cannot completely cover 1em text; You can change the border for 3.5em or 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>

Run codeHide result

Answer 2

, Safari ( :)) . 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>

Hide result