【发布时间】：2014-06-23 22:15:10
【问题描述】：
我试图修复 button 元素内的文件输入在 Firefox/IE 上无法正常工作的错误。 <input> 变得非常大，其不透明度设置为 0，允许编写标记的人创建自定义样式的“浏览”按钮。
这在 Chrome、Safari 和 Opera 中运行良好（它们都恰好在运行 Webkit/Blink）。单击该按钮将透明地单击嵌套<input> 中的“浏览...”按钮，但 Firefox 和 IE 具有不同的行为。我通过隐藏输入而不是按钮的子项来解决此问题，然后在单击按钮时调用其 click 事件。
这让我很好奇，我进行了一些测试，看看哪些有效，哪些无效：JSFiddle。
（如果小提琴碰巧消失了，这里是内容：
HTML：
<button>
<label for="checkbox-input">Click me</label>
<input id="checkbox-input" type="checkbox"/>
</button>
<button>
<input type="text"/>
</button>
<button>
<input type="color"/>
</button>
<button>
<a href="#test">test</a>
</button>
<button>
<span id="clicky">testing!</span>
</button>
<button>
<span class="crosshair">testing!</span>
</button>
CSS：
.hidden {
opacity: 100;
}
button {
cursor: pointer;
}
.crosshair {
cursor: crosshair;
}
JS：
$('#clicky').on('click', function() {
alert('clicky');
});
似乎在 Chrome、Safari 和 Opera 中，都单击按钮并触发按钮和嵌套元素上的单击事件。 Firefox 只点击按钮。 IE 只点击按钮，但在将鼠标悬停在嵌套元素上时会显示cursor。
根据spec 允许的按钮内容：
短语内容，但不得有交互式内容后代。
input 元素属于短语和交互式内容。根据这些信息，这些浏览器是否显示正确的行为？
【问题讨论】：
-
明确违反规范（将交互式内容放在不允许交互式内容的地方）然后期待“正确”的行为......很奇怪。
-
不只是奇怪。如果您违反规范，则所有赌注都将取消。没有为这种情况定义正确。
-
@NiettheDarkAbsol 那么什么会使
input元素无法交互？ -
<input type="hidden" />我猜是非交互式的。