html - 内元素的 "correct"行为是什么？

Question

我试图修复一个错误，其中文件输入在 button 中元素在 Firefox/IE 上无法正常工作。 <input>将其不透明度设置为 0 使其变得非常大，这允许编写标记的人创建自定义样式的“浏览”按钮。

这在 Chrome、Safari 和 Opera(它们都恰好运行 Webkit/Blink)中工作得很好。单击该按钮将透明地单击嵌套 <input> 中的“浏览...”按钮, 但 Firefox 和 IE 有不同的行为。我通过隐藏输入而不是按钮的子项来解决这个问题，然后调用它的 click单击按钮时的事件。

虽然这让我很好奇，但我将一些测试放在一起看看哪些有效，哪些无效:JSFiddle .

(如果 fiddle 碰巧消失了，这里是内容:

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 允许的按钮内容:

Phrasing content, but there must be no interactive content descendant.

input元素属于措辞和互动内容。根据这些信息，这些浏览器是否显示正确的行为？

Answer 1

BUTTON 中不能有 INPUT 元素。您的 HTML 已损坏。无法确定任何浏览器的行为是否正确。