Safari seems to add extra spacing to text

[leinaD]

I experience weird behaviour in Safari:

<div style="height: 35px">
  <div style="height: 100%">
    <div style="vertical-align: middle;background-color: burlywood">
      <div style="font-size: 12px;background-color: cyan">Test</div>
    </div>
  </div>

See this image –> https://i.stack.imgur.com/FMzXW.jpg

It’s not obvious but the lower gap 2 is larger than the upper gap 1. On windows Chrome it’s the same height, only in Safari there is an extra spacing below.

Can somehow tell me why?

Basically, I just want to center the text but can’t achieve this. Line-height is also tricky with Safari, so I tried this approach.

Thanks for any help :)

[Author]

Posts