Question

当我在Mozilla Jetpack中创建状态栏面板时，它看起来像一个无中断的灰色框，“中断”状态栏，因为它没有边框/阴影/等。使它看起来像一个普通的状态栏面板。

如何让它看起来像其他状态栏面板？

Answer 1

涉及两个技巧。更重要的是将状态栏HTML包装在一对使用<div> CSS声明设置样式的-moz-appearance中：

<div style="-moz-appearance:statusbar">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

这让我们接近，但真实状态栏的左侧略微闪亮，当应用于栏中间的状态栏面板时非常明显。您可以通过在外部<div>的左侧添加50像素填充和负边距来解决此问题：

<div style="-moz-appearance:statusbar;margin-left:-50px;padding-left:50px">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

Etvoilà！状态栏面板与正常状态无法区分。如果您的内容都是HTML，那么您就完成了。但是，如果您希望状态栏面板的文本也匹配，则还可以应用其他一些样式。以下是使用嵌入式样式表的完整JavaScript源代码：

jetpack.statusBar.append({
    html: (<><![CDATA[
        <style type="text/css">
            .statusbar {
                font-family: Tahoma;
                font-size: 11px;
                height: 22px;
                -moz-appearance: statusbar;
            }

            .statusbarpanel {
                height: 18px;
                line-height: 17px;
                -moz-appearance: statusbarpanel;
                padding-left: 4px;
                padding-right: 4px;
            }
        </style>

        <div class="statusbar">
            <div class="statusbarpanel">
                Your content here.
            </div>
        </div>
    ]]></>).toString()
});

（此示例也使用E4X to simulate multi-line strings in JavaScript。）

如何正确设置Jetpack状态栏面板的样式？

1 个答案: