根据MDN，按钮是一个内联元素
但是，按钮元素的默认样式为display:inline block（请参见此问题）
按钮，文本区，
输入，选择{显示：内联块}
到目前为止还不错
然而：
如果我现在用display:inline设置按钮，则宽度仍然适用
演示
按钮，
div{
宽度：200px；
边框：1px纯红；
显示：内联；
}<；按钮>；按钮</按钮>；
<；部门>；部门</部门>现在，根据规范：width不适用于内联元素（未替换）
适用于：所有元素，但未替换的内联元素、表行、，
和行组
在这种情况下：
为什么宽度仍然应用于内联按钮元素
正如在评论中提到的，我非常确定这与特定于浏览器的呈现行为有关，这是表单元素的典型表现。当您在按钮上设置display:inline时，我相信正在发生的是。。。没有什么实际上，它与典型的浏览器默认值显示：内联块相同，宽度属性确实适用于该块
请参阅第10.2节，该节描述了宽度属性本身。特别是它解释了为什么width属性不适用于内联元素（或内联框）：
此属性不适用于未替换的内联元素。未替换内联元素框的内容宽度是框内呈现内容的宽度（在子元素的任何相对偏移之前）。回想一下，内联框流入行框。线框的宽度由其包含块给出，但可能因浮点数的存在而缩短
简而言之，这是因为内联元素的内容驻留在行框中。线框的宽度不能直接控制；它完全由包含块和任何附带浮动决定。您可以在第9.4.2节中看到行框呈现的示例，该节描述了内联格式上下文
如果display:inline实际将按钮渲染为一个内联框，则其所有内容都会溢出，并且不再像按钮那样外观或功能。想要阻止这种情况发生是有道理的，我认为浏览器就是这么做的
那么他们到底做了什么来防止这种情况呢？按钮是被替换的元件吗？我不能肯定。但请注意，第9.2.2节中说：
非内联框的内联级别框（如替换的内联级别元素、内联块元素和内联表元素）称为原子内联级别框，因为它们作为单个不透明框参与其内联格式上下文
第10节没有明确提到原子内联级别框，但它有一些章节用于计算内联替换元素的尺寸，以及内联块元素（无论是否替换），所有这些元素都被视为原子内联，如上所述。在所有这些情况下，width属性如果不是auto，则会正常应用
因此，尽管按钮是否为替换元素仍有争议，但就这个问题而言，它可能根本不重要。但它仍然是某种原子内联元素，因为它仍然参与内联格式上下文。不过，值得一提的是，如果不设置宽度，它似乎会收缩以适应其内容，因此在这种情况下，它的行为可能更接近内联块。可以这样说，display的实际值变为inline block，尽管这在开发人员工具中从未反映出来，因为计算的值没有改变（这也是特定于浏览器的渲染行为的副作用）