在xul扩展名中定义图像的高度

Question

我的扩展程序是一个叠加层，在工具栏中包含一些图像。我需要将这些图像显示得很小（约15px），但它们总是在工具栏的相同高度上渲染。 我已经尝试定义图像的高度和maxHeight以及它们被放置的hbox，但它不起作用。

这是一段代码：

...

<toolbox id="navigator-toolbox">
    <toolbar id="my-toolbar">
        <label>images:</label>
        <hbox id="rsour_inputRating">
            <image id="rsour_1" />
            <image id="rsour_2" />
            <image id="rsour_3" />
            <image id="rsour_4" />
            <image id="rsour_5" />
        </hbox>
    <toolbarseparator />

...

Answer 1

正确的方法是在CSS中使用-moz-box-align，或者在xul中使用align属性，这样图像就不会垂直拉伸：

#rsour_inputRating{
  -moz-box-align:center;
}

#rsour_inputRating img{
  list-style-image : url("chrome://...");
  width:20px;
  height:15px;
}

Answer 2

在文件顶部添加：

<?xml-stylesheet href="chrome://your_ext_name/content/cssFile.css" type="text/css"?>

然后在css文件中：

#rsour_inputRating img  {height:15px;}