Question

Firefox中似乎存在一个错误（已marked as resolved但在我的FF12上失败）导致<select>个元素在-moz-transform更改其位置时无法正常工作。这可以通过这个简单的测试用例来复制：

<style type="text/css">
div {
    -moz-transform:translate(380px,140px);
}   
</style>
<div>
    <select>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>    
</div>

这会使选择框呈现在正确的位置，但所有选项都是鼠标无法选择的。使用键盘选择它们可以正常工作。

除了删除所有转换之外，还有其他解决方法吗？任何其他浏览器都不存在该问题。

Answer 1

我之前遇到过transform编辑过的问题，并且我用一些JavaScript和额外的CSS解决了这个问题。

document.addEventListener("transitionend", function(event) {
    var style = event.target.style;
    if (event.propertyName.substr(-14) == "transitionend") {
        style.position = "absolute";
        style.left = "200px";
    }
});

您需要绑定mozTransitionEnd，webkitTransitionEnd等

破解<select> with -moz-transform？</select>的解决方法

1 个答案: