为什么边框框不适用于 inline-block 元素？答案

【问题标题】：why doesn't border-box work on inline-block element?为什么边框框不适用于 inline-block 元素？
【发布时间】：2015-10-24 12:07:48
【问题描述】：

演示：http://jsfiddle.net/L5jchnpm/

我遇到了问题，我的印象是display: inline-block 使元素表现为内联元素和块元素。

而box-sizing: border-box 使块元素宽度以补偿边框的宽度，但inline-block 似乎并非如此。

不包括边框宽度。

有什么解决方法，以及为什么会这样。

代码

<ul>
    <li>home</li>
    <li>about</li>
    <li>work</li>
    <li>portfolio</li>
    <li>contact</li>
</ul>

css

ul {
    overflow: auto;
}
li {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid;

}

li:hover {
    border: 5px solid;
}

【问题讨论】：

既然您在谈论内联块，最可能的原因是内联块实际上没有设定宽度 - 它只是缩小以适应其内容。盒子大小不会影响它计算其内容盒子的方式——它仍然需要至少适应它的内容——所以在这种特殊情况下有一个解决方法是没有意义的。
显示代码和/或截图？
请添加你的代码？
Can't reproduce
box-sizing 确定如何处理显式 height 或 width。你没有height 也没有width，所以box-sizing 没有区别。

标签： html css

【解决方案1】：

解决方法：使用轮廓而不是边框，为li CSS 设置一个margin 值，这样当您将鼠标悬停在它们上方时它们就不会做出奇怪的反应，例如Fiddle：

li{
    outline: 1px solid;
    margin: 5px;
  }
li:hover {
    outline: 5px solid;
}

【讨论】：