HTML 替代选择选项答案

【问题标题】：HTML displaced select optionsHTML 替代选择选项
【发布时间】：2014-10-17 15:43:27
【问题描述】：

下面的代码乍一看似乎可以正常工作，但是 FF（目前在 FF26 上进行测试）正在取代选择选项并且之后无法工作（无法选择该选项）。 Chrome 35 没有问题。这是一个 FF 错误，可能是对 flexbox 的部分支持等？

HTML

<div class="order-item-new">
 <select id="item" class="select" form="order-form" name="order[]">
  <option value="1">One</option>
  <option value="2">Two</option>
 </select>
</div>

CSS

.order-item-new
{
    -moz-box-direction: normal;
    -moz-box-flex: 0;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.15) 18%, rgba(61, 145, 153, 0.15) 50%, rgba(255, 255, 255, 0.15) 84%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: flex;
    flex: 0 1 45px;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.order-item-new select
{
    -moz-box-flex: 0;
    flex: 0 1 120px;
    margin: 7px 10px;
}

示例：http://jsfiddle.net/wJ4H9/10/

【问题讨论】：

标签： html css debugging firefox flexbox

【解决方案1】：

从caniuse.com开始，Firefox 30 及更高版本支持 flexbox，但早期版本不支持。

【讨论】：

来自 caniuse.com: 3. 不支持 flex-wrap 或 flex-flow 属性。然而，我的 CSS 中没有这样的属性。
有许多不同的 flexbox 规范 - 你提到的两个属性来自 2012 规范。