Question

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

这在Chrome，Safari和Opera（这些都恰好运行Webkit / Blink）中运行良好。单击按钮将透明地单击＆＃34;浏览...＆＃34;来自嵌套<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中，所有按钮都会点击按钮并触发按钮和嵌套元素上的click事件。 Firefox只点击按钮。 IE仅单击该按钮，但在将鼠标悬停在嵌套元素上时显示cursor。

根据spec

提供按钮的内容

短语内容，但必须没有互动内容后代。

input元素属于短语和互动内容。根据这些信息，这些浏览器中的任何一个都显示正确的行为吗？

Answer 1

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

什么是＆＃34;正确＆＃34; <button>？</button>中元素的行为

1 个答案: