选择框在Firefox中移位transform：scale（） [英] select box displaced in Firefox after transform:scale()

问题描述

缩放的DIV包含两个选择框。
由于缩放，选择框会改变位置。
但打开选择框后，选项会显示在不缩放父div的位置

请检查Fiddel： http://jsfiddle.net/wJ4H9/

在FF 28中失败

在Chrome和Opera中运作良好

代码：

 < div style =transform：scale（0.8）; transform-origin：center center 0px; position：absolute; top：0; left：0; bottom： 0;> 
< select style =position：absolute; top：50％; left：50％> 
< option> 1< / option> 
< option> 2< / option> 
< / select> 
 
< select style =position：absolute; top：60％; left：30％> 
< option> 1< / option> 
< option> 2< / option> 
< / select> 
< / div>感谢您的建议
 
  方案
当然是Firefox的一个错误。您应该在此处提交错误。
 
 
 
在Chrome中，一旦添加 -webkit-transform：scale（0.8），下拉菜单就会正确定位。 （请参见 http://jsfiddle.net/wJ4H9/2/ ）但是，请注意，选项不按比例缩小。
 
A scaled DIV is containing two select boxes.
Due to scaling the select boxes are changing position.
But after opening the select box the options are display at the position it would be without scaling the parent div

please check Fiddel: http://jsfiddle.net/wJ4H9/

Fail in FF 28

works well in Chrome and Opera

code:
<div style="transform: scale(0.8);transform-origin: center center 0px; position:absolute; top:0; left:0; bottom:0; right:0;">
    <select style="position:absolute; top:50%; left:50%"> 
        <option>1</option>
        <option>2</option>
    </select>

    <select style="position:absolute; top:60%; left:30%"> 
        <option>1</option>
        <option>2</option>
    </select>
</div>
thanks for your suggestions
解决方案
Definitely a bug in Firefox. You should file a bug here.

In Chrome, once you add -webkit-transform:scale(0.8), the dropdown menu is correctly positioned. (See http://jsfiddle.net/wJ4H9/2/) However, note that the options are not scaled down.

                        
这篇关于选择框在Firefox中移位transform：scale（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！