Line-height, different browsers, different fonts center differences how to deal with?

in css, when writing a Chinese character in a container with a fixed height, I most often use the same height and row height settings to deal with it. Recently, I found a problem and don"t know how to deal with it.

style (the most basic page, only one style is written, no reset)
< style >

div{
    display: inline-block;
    width: 100px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    border: 1px solid black;
    font-family: "microsoft yahei";
}

< / style >

is centered in Google browser.
above mac in Firefox
above in ie

how to deal with this, how to ensure the center effect in the whole browser.

added an effect under windows
sort is Firefox Google ie

Mar.09,2021

Thank you for the invitation. There are no specific requirements for this specification, so each browser implementation varies slightly. I hope it is absolutely in the middle to use other centring technologies, and it is good to use flex regardless of old browsers.


the English font you use, which is related to font and line height, is also elegant black, so it leads to different heights. If you find a font with uppercase about the same height as Yahei, the effect will be better (Chinese in yahn and English in selected font)


25-14 = 11px and 11px / 2 = 5.5px, most browsers don't deal with .5px, so some browsers take 5 up and 6 down, and some browsers take 6 up and 5 down, so they miss.

it is recommended that you increase 25px to 26px for a try. If not, you can only write a few hack for different browsers


pull up.

Menu