Question

我一直在努力争取这一天超过一天，其中大部分花在SO和谷歌上寻找解决方案并尝试各种各样的事情。

我正在使用SDK 1.14并在Firefox 23上进行测试。我有一个带有面板的小部件。面板的contentURL是数据目录中的本地HTML文件。当选择元素放置在HTML中并且用户单击该元素时，整个面板（或至少其内容）移动到浏览器窗口的左上角，从面板中移出视图它仍然位于屏幕的左下方。我可以看出面板（或至少其内容）移动到浏览器窗口的左上角，因为那里显示了选项。我认为单击select元素时它会绑定到 browser 窗口的原点。

Widget Icon Widget Panel Floating Options

作为测试，我将其降低到具有select元素的Widget和Panel的最小值。 main.js代码是：

exports.main = function () {
    var self = require('self'),
        testPanel = require('panel').Panel({
            contentURL: self.data.url('test.html')
        });

    require('widget').Widget({
        label: 'Test Panel',
        id: 'TestPanel',
        panel: testPanel,
        contentURL: self.data.url('images/icon_16.png')
    });
};

HTML是：

<!DOCTYPE html>
<html>
<body>
    <select>
        <option value='1'>1</option>
    </select>
</body>
</html>

当HTML最初加载时，选择元素在Widget的面板中正确显示。当我单击select元素时，选项元素会向上移动到浏览器窗口的左上角。当面板关闭并随后使用Widget的图标重新打开时，面板内容的位置不会重置。

Answer 1

这样就不会在评论中丢失：这是一个已知的错误，即Bug 886329。有人告诉我，因为这已经标记为P1（优先级1）＆＃34;它应该是列表中的非常高的＆＃34;。个人经验告诉我，在Firefox 23版本中不太可能修复（如果有的话）。也许它会在Firefox 24中修复，甚至可能更晚......

我没有想到的真正的解决方法，没有使用一些html UI库来模拟下拉列表（使用<select>时真的是操作系统级别的子窗口，但是在使用html时却没有）。网上有很多这样的实现。

当使用Firefox SDK在窗口小部件中的面板上单击选择元素时，如何防止面板向上滑出视图

1 个答案: