我不知道为什么，但只有在我的页脚上，内联 block 中有 li，事件类中有 border-top，我的 box-sizing : border-box 不起作用。
当类处于事件状态时，有一个 border-top，我们看到底部有一个缺口。
举个例子:
* { box-sizing: border-box }
#header{
position:absolute;
top:0;
right:0;
left:0;
background-color:#333c45;
height:60px;
line-height:60px;
}
#corp{
position:absolute;
top:60px;
bottom:60px;
right:0;
left:0;
background-color:#CDCDCD;
}
#footer{
position:absolute;
bottom:0;
right:0;
left:0;
background-color:#333c45;
height:60px;
line-height:60px;
}
#footer li{
display:inline-block;
width:45%;
}
ul{
margin:0;
padding:0;
}
.active{
color:#05FF01;
border-top:2px solid #05FF01;
}<html>
<head>
</head>
<body>
<div id="header">
test
</div>
<div id="corp">
</div>
<div id="footer">
<ul>
<li class="active">boutton 1</li>
<li>boutton 2</li>
</ul>
</div>
</body>
</html>我该如何解决这个问题？
谢谢!
最佳答案
box-sizing 确定如何解释指定的高度和宽度属性值，但您的 li 元素没有高度属性。它们的高度只是上边框高度和根据行高自动计算的内容框高度的总和。
关于html - box-sizing 不适用于 li with inline-block，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48586506/