Question

我正在使用plupload从中通过AJAX动态加载，并且此表单还有一个验证码图像。我正在努力使plupload垫片正确定位。然后我找到了一个适用于几乎所有浏览器的解决方案，谷歌Chrome除外。这是我的解决方案：

<span id="upl_container" style="position:relative;">
    <input type="button" id="my_button" value="Click me to upload something" />
</span>

在我设置的上传器设置中：

        browse_button : 'my_button',
        container : 'upl_container',

现在这使得垫片完全位于相对父级中，其中父级（span）正好是按钮的大小（我不能使用div，因为它占用其父级的100％宽度，然后plupload具有定位所有浏览器上的问题。）

当我检查Firefox中的plupload垫片设置（正确定位）时，我看到以下内容：

element.style {
    background: none repeat scroll 0 0 transparent;
    height: 28px;
    left: 0;
    position: absolute;
    top: -4px;
    width: 78px;
    z-index: 99999;
}

但在Chrome中它显示了我：

element.style {
position: absolute;
background: transparent;
z-index: 99999;
top: 0px;
left: 146px;
width: 70px;
height: 23px;
background-position: initial initial;
background-repeat: initial initial;
}

显然，左边的房产太大了。

现在我不在乎它是否是一个bug，我只是想找到一些解决方法如何强制plupload的左侧为0.我试着添加一个Javascript代码，在Init中将其设置为0 ，刷新，PreInit回调加载，但这没有帮助，左侧无论如何跳转到146px。

有没有办法强制垫片的左侧为0px？

（顺便说一句，我已将Flash设置为默认的plupload运行时，并回退到HTML4和HTML5）。

Answer 1

好的，所以我选择了以下丑陋的代码：

uploader.bind('Refresh', function(up) {
    $('#'+up.settings.container + ' > div').css('left',0);
    $('#'+up.settings.container + ' > div').css('top',0);
    $('#'+up.settings.container + ' > div').css('width','100%');
    $('#'+up.settings.container + ' > div').css('height','100%');
    $('#'+up.settings.container + ' > form').css('left',0);
    $('#'+up.settings.container + ' > form').css('top',0);
    $('#'+up.settings.container + ' > form').css('width','100%');
    $('#'+up.settings.container + ' > form').css('height','100%');
    $('#'+up.settings.container + ' > div').children().css('left',0);
    $('#'+up.settings.container + ' > div').children().css('top',0);
    $('#'+up.settings.container + ' > div').children().css('width','100%');
    $('#'+up.settings.container + ' > div').children().css('height','100%');
    $('#'+up.settings.container + ' > div').children().css('font-size','20px');// default is 999px, which breaks everything in firefox
})

然后！它适用于flash，htm5，htm4 runimes，在Chrome，Firefox，IE7，IE9上都经过测试。垫片到位，最后。

Answer 2

我遇到了垫片在动态加载和切换内容时不在正确位置的问题。

$('#my_button').mouseenter(function() {
    uploader.refresh();
});

足以解决它。

Chrome中的Plupload定位问题

2 个答案: