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

【问题标题】：define the height of an image in xul extension在 xul 扩展中定义图像的高度
【发布时间】：2010-03-01 04:28:24
【问题描述】：

我的扩展是一个在工具栏中有一些图像的叠加层。我需要将这些图像显示得很小（大约 15 像素），但它们始终呈现在工具栏的相同高度。我已经尝试定义 image 和 hbox 的 height 和 maxHeight ，但它不起作用。

这是一段代码：

...

<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 />

...

【问题讨论】：

标签： css firefox firefox-addon

【解决方案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;
}

【讨论】：

【解决方案2】：

在文件的顶部，添加：

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

然后在css文件中：

#rsour_inputRating img  {height:15px;}

【讨论】：