代码之家 › 专栏 › 技术社区 › Ben Blank Jarret Hardie

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

firefox-addon-sdk firefox-addon firefox

2

Ben Blank Jarret Hardie · 技术社区 · 16 年前

Mozilla Jetpack ,它看起来像一个毫无特色的灰色框,会“中断”状态栏,因为它缺少边框/阴影等,使其看起来像一块正常的状态栏面板。

1 回复 | 直到 13 年前

1

3

Ben Blank Jarret Hardie 16 年前

这涉及两个技巧。更重要的是将状态栏HTML打包成一对 <div> -moz-appearance CSS声明:

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

这让我们很接近,但实际状态栏的左侧有一个轻微的亮光,当应用到栏中间的状态栏面板时,这是非常明显的。您可以通过在外部的左侧添加50像素的填充和负边距来修复此问题 <div> :

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

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 .)