如何说服列表单元格中的图标大小为 16x16

Question

我正在尝试清理一个旧的（差不多）firefox 扩展程序，这让我有点精神错乱。它创建一个网站列表及其图标。它会将列表显示为弹出菜单或列表，具体取决于您的要求。

而且我无法让图标正确显示（这是这个扩展已经存在很长时间的问题）。在您做出选择之前，菜单上不会显示任何图标。然后它显示图标，但有一页的图标是 256x256，看起来很糟糕。同样在列表视图中。

据我所知，菜单都是用 menuitem-iconic 构建的，列表是用 listcell-iconic/listitem-iconic 构建的，但即使我向扩展 css 添加了 menuitem-iconic 覆盖（影响所有其他菜单图标正常），我无法识别它。

如果你把它放到 xul explorer 中，你就会明白我的意思

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<!-- listbox showing large icon -->

<listbox>
<listitem label="Widdershins"
      class="listitem-iconic"
      image="http://www.widdershinscomic.com/favicon.ico"
      style="max-height: 18px;"
/>
<listitem label="Darken"
      class="listitem-iconic"
      image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
      style="max-height: 18px;"
/>

</listbox>

<!-- menu shows no icons at all but when you select the 'darken' one you get a huge icon -->

<menulist label="label" accesskey="{accesskey}">
<menupopup>
<menuitem label="Widdershins"
      class="menuitem-iconic"
      image="http://www.widdershinscomic.com/favicon.ico"
      style="max-height: 18px;"
/>
<menuitem label="Darken"
      class="menuitem-iconic"
      image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
      style="max-height: 18px;"
/>
</menupopup>
</menulist>
</window>

我对可能发生的事情一头雾水。列表项的最大高度工作正常，导致相关行上的图标很宽但很短，但我希望它只是 16x16。

菜单没有这样的限制，并以 256x256 像素的全尺寸显示所选图像。

Answer 1

您可以通过添加 CSS 来设置显示图像的 <image> 元素的 width 和 height 的样式来完成此操作。 <image> 是 <listcell class="listitem-iconic"> 的 XBL 的一部分，由您的 <listitem class="listitem-iconic"> 隐式创建。您可以通过查看 XBL for the element, or using the DOM Inspector 和显示匿名内容来查看每个明确包含的元素由哪些元素组成。

您可以为显示的菜单列表图标设置类似样式 image.menulist-icon。

由于没有单独的 CSS 文件，您的问题有些复杂。但是，您可以使用数据 URI 将 CSS 直接包含在 XUL 中。

所以得到：

您可以使用：

<?xml-stylesheet type="text/css" href="data:text/css,
    image.listcell-icon, image.menulist-icon {
        width: 16px;
        height: 16px;
    }"
?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <listbox>  <!-- listbox showing large icon -->
    <listitem label="Widdershins"
      class="listitem-iconic"
      image="http://www.widdershinscomic.com/favicon.ico"
      style="max-height: 18px;"
    />
    <listitem label="Darken"
      class="listitem-iconic"
      image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
      style="max-height: 18px;"
    />
  </listbox>
<!-- menu shows no icons at all but when you select 'darken' then you get a huge icon -->
  <menulist label="label" accesskey="{accesskey}">
    <menupopup>
      <menuitem label="Widdershins"
        class="menuitem-iconic"
        image="http://www.widdershinscomic.com/favicon.ico"
        style="max-height: 18px;"
      />
      <menuitem label="Darken"
        class="menuitem-iconic"
        image="http://darkencomic.com/wp-content/themes/inkblot/includes/images/icon.png"
        style="max-height: 18px;"
      />
    </menupopup>
  </menulist>
</window>

如何说服列表单元格中的图标大小为 16x16

How do I persuade an icon in a listcell to be sized to 16x16

css

firefox

firefox-addon

xul

palemoon