为什么宽度适用于内联显示的按钮？

Question

根据MDN,a button是内联元素.

然而,按钮元素有默认样式与display: inline-block(见这个问题)

button, textarea,
input, select   { display: inline-block }

到现在为止还挺好.

然而:

如果我现在设置按钮display:inline- 宽度仍适用!!

DEMO

button,
div {
  width: 200px;
  border: 1px solid red;
  display: inline;
}

<button>button</button>
<div>div</div>

现在,根据规范:width不适用于内联元素(未替换)

适用于:所有元素,但未替换的内联元素,表行和行组

既然如此:

为什么宽度仍然适用于内联button元素？

Answer 1

正如评论中所提到的,我很确定这与特定于浏览器的渲染行为有关,因为这是典型的表单元素.当你display: inline按下按钮时,我相信发生的事情......没什么.实际上,它display: inline-block与width属性适用的典型浏览器默认值相同.

请参阅第10.2节,其中描述了width属性本身.特别是它解释了为什么该width属性不适用于内联元素(或内联框):

此属性不适用于未替换的内联元素.未替换的内联元素框的内容宽度是其中的呈现内容的内容宽度(在子项的任何相对偏移之前).回想一下,内联框流入线框.线框的宽度由其包含块给出,但可能因浮动的存在而缩短.

简而言之,这是因为内联元素的内容位于行框中.线盒的宽度不能直接控制; 它完全由包含块和任何偶然浮动决定.您可以在9.4.2节中查看线框渲染的示例,该示例描述了内联格式化上下文.

如果display: inline实际上将按钮呈现为内联框,则其所有内容都会溢出,并且它将不再像按钮一样显示或起作用.想要防止这种情况发生是有道理的,我认为这就是浏览器的作用.

那么他们究竟做了什么来防止这种情况呢？按钮是替换元素吗？我不能肯定地说.但请注意,在9.2.2节中,它说:

不是内联框的内联级框(例如替换的内联级元素,内联块元素和内联表元素)称为原子内联级框,因为它们作为单个不透明框参与其内联格式化上下文.

第10节没有明确提到原子内联级别的框,但是它确实有用于计算内联替换元素的维度的部分,以及无论是替换还是未替换的内联块元素,所有这些都被认为是如上所述的原子内联.在所有这些情况下,width如果不是,则财产正常适用auto.

因此,虽然按钮是否是替换元素仍然存在争议,但对于此问题而言,它可能根本不重要.但它仍然是某种原子内联元素,因为它仍然参与内联格式化上下文.但是,对于它的价值,如果你没有设置宽度,它似乎缩小以适应其内容,因此在这种情况下它的行为可能更接近于内联块的行为.有人可能会说,那么该实际值的display变inline-block,虽然这是从来没有体现在开发者工具,因为计算的值不会改变(再次特定浏览器的渲染行为的副作用).

Answer 2

既然像Boltclock一样,我不认为对此有一个简单的答案,这就是我对这个主题的思考作为一个答案,但我希望它能提供丰富的信息.

尽管CSS显示属性表面上非常简单,但它实际上包含许多方面.CSS level 3 draft spec css-display捕获了一些复杂性,但似乎仍未充分涵盖它.

HTML5规范说明了元素的渲染<button>:

当按钮绑定应用于按钮元素时,该元素应呈现为"内联块"框,呈现为按钮,其内容是元素的内容.

一个inline-block盒子有很多方面:

1. 内联级元素

这意味着它参与行框内的内联格式化上下文.它与同一行上的其他元素按顺序流动.线框的内容可以text-align:center与其容器上的属性居中对齐,并通过避免浮动元素缩短线框.

2.应用宽度属性,自动值缩小到适合

与未替换的display:inline元素不同,宽度值适用.但是,如果未指定宽度值,则应用缩小到拟合算法来确定宽度.这类似于浮动元素或display:table元素,但display:block如果没有指定宽度,则与尽可能宽的元素不同.它也不同于替换的内联元素并替换了内联块元素,如果没有指定宽度,则使用它们的固有宽度(如果它们有一个),如果它们没有,则使用默认值300px.对于替换元素,"缩小到适合"是一个毫无意义的概念.

3. 块容器元素

块容器元素由一堆线框组成.内容从一个行框流向下一行,并且内联块元素的高度增长(受溢出影响)以完全包含所有行框.

4.基线是最后包含的线框的基线

当内联块元素包含多行时,其基线是这些行中的最后一行.这与浮子或display:table-cell元件不同,浮子或元件也是收缩配合的,阻挡容器元件.浮动在正常流量之外,因此它们没有基线,哪些display:table-cell元素的基线是其第一个线框的基线.具有多行的按钮根据此最后一个行框规则垂直对齐.

现在,这适用于默认显示设置.HTML5渲染要求意味着inline-block当指定值为时,按钮显示的使用值均为inline.但它没有考虑指定值时的行为block.在这种情况下,元素在它之前和之后都有一个换行符,并将margin:auto框作为display:block元素的中心,并且不是预期的inline-block.

但是,它的指定值的宽度auto是收缩到适合的,就像内联块一样,而预期的行为display:block是尽可能宽的.据我所知,唯一表现得像的显示值是display:table,但没有任何其他表明display:table正在使用.

因此,我可以找到的内容中没有任何内容可以准确匹配.我们只能希望当css-display规范完成时,它将涵盖这种行为.