css中英文字母和汉字的高度不同,如何解决呢?

Question

HTML和样式

<ul class="tab-menu">
    <li>
        <input id="tab-0" type="radio" name="tabs" detector_type="1" checked="checked"> 
        <label for="tab-0">温度</label>
    </li>
    <li>
        <input id="tab-1" type="radio" name="tabs" detector_type="4"> 
        <label for="tab-1">PH</label>
    </li>
</ul>

 .tab-menu {
    overflow: hidden;
    background-color: #fff;
    margin: 0 10px;
    text-align: center;
    font-size: 0;
    padding: 10px 0;
    list-style: none;
}

.tab-menu li {
    display: inline-block;
    font-size: 15px;
    color: #00a1ea;
    position: relative;
    border: 1px #00a1ea solid;
    border-right: 0;
}
.tab-menu li:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.tab-menu li:last-child {
    border-right: 1px #00a1ea solid;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

Answer 1

定行高， line-height 。如果有条件的，可以定高， height 。

Answer 2

你是用什么框架了吗？原生代码没有出现你图片上的效果

Answer 3

设计行高line-height:100px;height:100px;两者一样；就可以解决问题。

Answer 4

设置固定高，然后居中处理。
居中可以通过设置line-height与height同样大小实现，看你用了display:inline-block,可以试下属性vertical-align：middle