Question

我有一个带有<prefwindow>的Firefox插件来控制我的插件的首选项。它包含2个单独的<description>标记，可在某些位置提供更多信息（请参阅下文）。我在对话框加载时运行了一些JavaScript，根据用户屏幕的尺寸设置CSS max-height和max-width（我发现这是必要的，因为否则对话框将水平扩展超过边缘屏幕恰好是一个<description>（其中包含CSS word-wrap: break-word设置 - Forcing a description widget to wrap）适合一行。

然而，当Firefox（v3.6和v4.0）显示预览窗口时，它只会将描述视为设置max-width和max-height后的一行，所以有一个滚动条，即使对话框有垂直扩展的空间（我在最顶层的vbox上设置了overflow: auto，所以如果没有滚动条，东西就不会被切断）。

基本上，我想要的是<description>标签的内容要换行，这样对话框不会超过用户的屏幕，然后对话框也会水平调整大小，所以没有滚动条。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;" sizemode="maximized">
    <prefpane>
        <script type="application/x-javascript"><![CDATA[
        window.addEventListener("DOMContentLoaded", function (event) {
            // Initialize size
            document.documentElement.style.maxWidth = ((screen.availWidth || screen.width) - 100) + "px";
            document.documentElement.style.maxHeight = ((screen.availHeight || screen.height) - 100) + "px";
        }, false);

        function showExample(n) {
            // Not important...
        }
        ]]></script>
        <preferences><!-- ... --></preferences>
        <!-- Just trying everything with this vbox here... -->
        <vbox flex="1" style="overflow: auto; width: 100%; height: 100%;">
            <groupbox>
                <caption label="Inline Reference Links" />
                <description style="word-wrap: break-word;">Inline reference links are the tiny "superscript" numbers that appear inside [special name here] and link to a reference at the bottom. <button oncommand="showExample(1)" label="Show Example" style="vertical-align: middle;" /></description>
                <radiogroup preference="pref_mode">
                    <radio value="0" label="Show all inline reference links by default" />
                    <radio value="1" label="Hide all inline reference links by default" />
                    <radio value="2" label="Only show inline reference links when hovering over containing paragraph" />
                </radiogroup>
                <hbox>
                    <checkbox preference="pref_hideOtherTags" label="Hide other bracketed tags" />
                    <button oncommand="showExample(2)" label="Show Example" style="vertical-align: middle;" />
                </hbox>
                <checkbox preference="pref_useVisibility" label="Make inline reference links invisible instead of removing them*" />
                <description style="word-wrap: break-word; height: auto;">*When the inline reference links are invisible, they cannot be seen, but they still take up space on the page. When we are set to show inline reference links when hovering over the containing paragraph, this option can be useful to prevent shifting when the reference links are shown.</description>
            </groupbox>
        </vbox>
    </prefpane>
</prefwindow>

以下是prefwindow的屏幕截图：http://i.stack.imgur.com/L3JOm.png

Answer 1

涉及溢出时，大小约束不会正确传播。不幸的是，prefwindow和prefpane元素都包含溢出，因此描述将始终声明一行的高度，并且稍后才会发现它需要更多的高度。

可能的解决方法可能是删除vbox上的溢出，然后将vbox的高度显式设置为其内容高度。您需要在设置最大宽度后执行此操作，以便第一次调用sizeToContent将获得正确的宽度;然后第二个将获得正确的高度。

sizeToContent();
var vbox = document.getElementById('vbox');
vbox.height = vbox.boxObject.height;
sizeToContent();

...

<vbox id="vbox" flex="1">

XUL prefwindow大小问题

1 个答案: