按钮是一个内联元素,但宽度有效吗? [英] button is an inline element but width is working?
问题描述
按钮是一个内联元素,但是宽度属性起作用,为什么呢?
Button is an inline element, but the width properties work on it, how come?
button {
width: 300px;
}
<button>asdfsdf</button>
<button>234234d</button>
推荐答案
大多数浏览器默认将button
元素显示为inline-block
(根据(非标准))
Most browsers display button
elements as inline-block
by default, according to the (not normative) Appendix D. Default style sheet for HTML 4.
Therefore, you could expect the width
property to work, as described in Calculating widths and margins - Inline-block, non-replaced.
但是,不仅如此. button
元素是已替换的元素:
But it's not just that. button
elements are replaced elements:
在CSS中,被替换的元素是表示为 不在CSS范围内.这些是外部对象,其 表示形式独立于CSS.
In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independent of the CSS.
Therefore, they have some special behavior. For example, independently of whether they have display: inline-block
or display: inline
, they are sized respecting the width
property, according to Calculating widths and margins - Inline, replaced.
值得注意的是,HTML5始终将它们强制显示为inline-block
. 10.5.2绑定-button
元素:
It's worth noting that HTML5 forces them to be displayed as inline-block
anyways. This is explained in 10.5.2 Bindings - The button
element:
@namespace url(http://www.w3.org/1999/xhtml);
button { binding: button; }
当 button 绑定应用于button
元素时,该元素
预计将呈现为内联块"框,呈现为按钮
其内容是元素的内容.
When the button binding applies to a button
element, the element
is expected to render as an 'inline-block' box rendered as a button
whose contents are the contents of the element.
这篇关于按钮是一个内联元素,但宽度有效吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!