What’s wrong with the CSS that makes the two Sos act weird?

Question

I’m trying to solve a layout misalignment problem, which in Windows 10, with the latest Chrome it changes the padding from the height of a button. This button looks right on Mac OS Mojave, using the same version of Chrome, note between the pictures, the difference:

Mac:

Windows:

.item-descritores {
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    text-align: center;
    margin: auto -6% auto -6%;
    position: relative;
    z-index: 200;
}
.selo-descritores {
    padding: 7px 10px 3px;
    background: #d8d8d8;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin: 4px;
    color: #777;
    border: none;
}

button {
   -webkit-writing-mode: horizontal-tb !important;
   text-rendering: auto;
   color: buttontext;
   letter-spacing: normal;
   word-spacing: normal;
   text-transform: none;
   text-indent: 0px;
   text-shadow: none;
   display: inline-block;
   text-align: center;
   align-items: flex-start;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div class="item-descritores"  style="">
   <button data-toggle="tooltip"  title="" class="selo-descritores" style="">EF15LP03</button>
</div>