html - Firefox flex 错误应用于按钮？

Question

我正在尝试申请 flex一个按钮，但在 Firefox 上我遇到了一个问题，在 Chrome 上不会发生。

这是我的 CSS:

.button {
  display: inline-flex;
  align-items: center;
}

正如您在 fiddle 中看到的那样，“插入符号”一词被移到了新的一行，但只有当元素是 <button> 时才会发生这种情况。标签，<div>按预期工作。

http://codepen.io/anon/pen/XbLMGx

这是 Firefox 的错误还是我遗漏了一些额外的 CSS？

Answer 1

没关系，看起来“火狐先生”不喜欢这个主意……

<button> is not implementable (by browsers) in pure CSS, so they are a bit of a black box, from the perspective of CSS. This means that they don't necessarily react in the same way that e.g. a <div> would.

This isn't specific to flexbox -- e.g. we don't render scrollbars if you put "overflow:scroll" on a button, and we don't render it as a table if you put "display:table" on it.

Stepping back even further, this isn't specific to <button>. Consider <fieldset> and <table> which also have special rendering behavior:
data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
data:text/html,<table style="display:flex"><div>abc</div><div>def</div>

In these cases, Chrome agrees with us and disregards the "flex" display mode. (as revealed by the fact that "abc" and "def" end up being stacked vertically). The fact that they happen to do what you're expecting on is likely just due to an implementation detail.

In Gecko's button implementation, we hardcode <button> (and <fieldset>, and <table>) as having a specific frame class (and hence, a specific way of laying out the child elements), regardless of the "display" property.

If you want to reliably have the children reliably arranged in a particular layout mode in a cross-browser fashion, your best bet is to use a wrapper-div inside the button, just as you would need to inside of a <table> or a <fieldset>.

https://bugzilla.mozilla.org/show_bug.cgi?id=984869