用了box-sizing：border-box；后，为li添加右边框，右边框长度超出下边框，怎么解决？

Question

html代码：
<div class="statisticCharts fdStatistics">

<ul id="selUl1" class="selUl">
    <li>日</li>
    <li>月</li>
    <li>年</li>
    <li>历年</li>
</ul>
<div class="charts"></div>

</div>

css代码：
.content .statisticCharts{

width: 100%;
border-top:1px solid #e7e8e9;

}
.statisticCharts ul{

margin: 0.6rem auto;
width: 90%;
height:1.8rem;
line-height: 1.8rem;
text-align: center;
box-sizing: border-box;
border:1px solid #00aeff;
border-radius: 5px;

}
.statisticCharts ul.selUl li{

float: left;
width:25%;
box-sizing: border-box;
border-right: 1px solid #00aeff;

}
.statisticCharts ul.selUl li:last-child{

border-right: none;

}

Answer 1

看了下在Chrome表现正常，在Firefox就出现border超过元素的现象，应该是浏览器处理盒模型的方式存在差异引起的。
解决：给ul加上overflow: hidden即可

.statisticCharts ul{
margin: 0.6rem auto;
width: 90%;
height:1.8rem;
line-height: 1.8rem;
text-align: center;
box-sizing: border-box;
border:1px solid #00aeff;
border-radius: 5px;
overflow: hidden /* 给外层ul加上即可 */
}

Answer 2

.statisticCharts ul {
    margin: 0.6rem auto;
    width: 90%;
    /* height: 1.8rem; */  /*不要定义高度*/
    /* line-height: 1.8rem; */
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #00aeff;
    border-radius: 5px;
    overflow: hidden;/*让float:left的元素不塌陷*/
}

Answer 3

ul的高改成 height：1.85rem 就可以了