我正在使用 select2 jQuery select box replacement ,但我遇到了 CSS 转换问题。
基本上,我在页面上有一个按钮可以增加 transform 和 font-size 属性。当变换为 1.25 时,选择框的下拉菜单处于关闭位置。
我的 jsFiddle 测试 1(默认缩放): http://jsfiddle.net/ugPmm/1/
我的 jsFiddle 测试 2(具有更大的缩放): http://jsfiddle.net/wCALL/2/
在测试 2 中,您可以看到下拉菜单没有正确定位。
我在 CSS 中所做的页面修改是:
.zoom-largest {
font-size: 18px; }
body.zoom-largest {
-o-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
是什么导致下拉列表的位置不正确?
最佳答案
这是一个关于 jquery 如何计算应用了 css 转换的元素的偏移量的错误。 Tt 应该返回未转换的像素值,但它会计算并返回转换后的像素值。
这是一个关于这个问题的 jquery bug ticket:
http://bugs.jquery.com/ticket/8362
这里有stackoverflow的解释和偏移问题的解决方法:
Webkit and jQuery draggable jumping
因此 select2 jquery 插件获取了错误的偏移值并使用错误的像素值定位下拉列表。
我们可以做的是替换 select2 插件中的偏移量调用来 hackily 修复错误:
替换这个(第 986 行):
var offset = this.container.offset(),
有了这个:
var offset = { top: this.container[0].offsetTop, left: this.container[0].offsetLeft },
关于jquery - Select2 和 CSS 转换 : dropdown menu is off position,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13200987/