标签 javascript css firefox
<分区>
我正在设计一个基于使用 translate3d 的主题的网站，它会干扰选择下拉窗口。
<select>
<option value="Biały">Biały</option>
<option value="Czarny">Czarny</option>
<option value="Czerwony">Czerwony</option>
<option value="Żółty">Żółty</option>
</select>
基本上，当我在 Firefox 中打开列表时，整个列表会像这样移动到左边:
编辑-------------------- 添加了一个 JSBin单击“关于”选项卡
最佳答案
我不确定这是否是您要查找的内容，但根本问题不是旋转本身。这是容器有一个转换。这种转变可能完全没有必要。您可以替代使用绝对定位，而不是使用转换。您必须执行以下操作:
#spaces-main{
transform: none!important;
position: absolute;
left: 240px;
right: 0;
width: auto;
}
原来的demo和我的版本好像出现了水平滚动条，所以我也加了这个
body{
overflow-x:hidden;
}
权衡是响应可能需要调整，并且一个或多个转换可能无法像最初那样工作。无论如何，这是一个下拉菜单现在可以正常工作的演示。
http://jsbin.com/karinajalu/1/edit?html,output
您可以考虑添加一个样式化的下拉插件，而不是这个解决方案。它可能不会遇到相同的问题，并且在各种浏览器中会更好、更一致。我没有关于使用什么插件的建议。
关于javascript - Firefox translate3d 混淆了选择输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36132678/
相关文章：
javascript - $(this).prop ('property' ) 与 this.property
html - Bootstrap 3.3.5 - 让 2 个按钮彼此相邻
html - 用 "dynamic height"创建一个盒子
javascript - 用户脚本在 Chrome 上的 Tampermonkey 中有效，但在 Firefox 上的 Greasemonkey 中无效
javascript - 使用 jQuery 更新表后 DataTables fnFilter 不起作用
css - 两个 css 选择器 [class^=test] vs [class|=test] 有什么区别