Firefox使用select输入翻译混乱

Question

我正在根据使用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中打开列表时，整个列表移位就像这样：

EDIT ------------------ 添加JSBin点击关于标签

Answer 1

我不确定这是你在找什么，但根本问题不是旋转本身。这是容器有变换。这种变换可能完全没有必要。您可以替换绝对定位，而不是使用变换。您必须执行以下操作：

#spaces-main{
  transform: none!important;
  position: absolute;
  left: 240px;
  right: 0;
  width: auto;
}

水平滚动条似乎出现在原始演示和我的版本上，所以我也添加了这个

body{
  overflow-x:hidden;
}

权衡是响应可能需要调整，一个或多个转换可能不像原来那样有效。在任何情况下，这是一个演示文稿，下拉列表现在正常工作。

http://jsbin.com/karinajalu/1/edit?html,output

您可以考虑添加一个可样式的下拉插件，而不是此解决方案。它可能不会遇到相同的问题，它会在各种浏览器中更好，更一致。我没有关于使用什么插件的建议。