正如您所确定的,这是 Firefox 中的一个错误。你已经提交了一个关于它的错误。现在我阅读了这个错误,我看到你已经确定了一种让它工作的方法。在看到该错误之前,我已经编写了继续crop
(<checkbox>
并且<radio>
)为您工作所需的代码。
如果您已经有适合您的代码,请发布答案。
问题在于,对于两者,<checkbox>
XBL都会导致创建一个节点作为包含or文本的子节点。但是,进行裁剪的接口是针对元素的属性实现的,而不是针对子节点实现的。<radio>
<text>
<label>
<checkbox>
<radio>
nsIDOMXULDescriptionElement
value
<label>
<text>
这两种解决方案要么nsIDOMXULDescriptionElement
为<text>
节点实现,要么在属性存在时(或者可能仅在它有效时)使用文本的value
属性。使用子节点的原因是当文本太长而无法水平放置时,允许多行换行。换句话说,创建节点的目的是为了允许除.label
crop
<text>
<label>
<text>
crop
纵观 XUL 的 XBL,似乎这种结构用于多个元素。我没有调查使用这个构造是否会导致其他元素出现问题,而不是crop
.
对于<checkbox>
和<radio>
XBL 包含几个不同的文件。
<checkbox>
(在绑定 IDcheckbox
和中)所需的行checkbox-crop-with-spacing
是:
<xul:label class="checkbox-label" xbl:inherits="value=label,accesskey,crop" flex="1"/>
代替 :
<xul:label class="checkbox-label" xbl:inherits="xul:text=label,accesskey,crop" flex="1"/>
对于收音机(多个文件),需要的行(用于绑定 IDradio
和radio-with-spacing
)是:
<xul:label class="radio-label" xbl:inherits="value=label,accesskey,crop" flex="1"/>
代替:
<xul:label class="radio-label" xbl:inherits="xul:text=label,accesskey,crop" flex="1"/>
现在,因为我们希望该功能同时具有裁剪标签和多行标签,所以我们不想只更改这些行。crop
我们希望创建仅在属性存在时才应用的附加 XBL 绑定。
新绑定(checkbox_radio_crop.xml):
<?xml version="1.0"?>
<bindings id="checkboxAndRadioCropBindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="checkbox-crop"
extends="chrome://global/content/bindings/checkbox.xml#checkbox">
<content>
<xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
<xul:hbox class="checkbox-label-box" flex="1">
<xul:image class="checkbox-icon" xbl:inherits="src"/>
<xul:label class="checkbox-label"
xbl:inherits="value=label,accesskey,crop" flex="1"/>
</xul:hbox>
</content>
</binding>
<binding id="checkbox-crop-with-spacing"
extends="chrome://global/content/bindings/checkbox.xml#checkbox">
<content>
<xul:hbox class="checkbox-spacer-box">
<xul:image class="checkbox-check" xbl:inherits="checked,disabled"/>
</xul:hbox>
<xul:hbox class="checkbox-label-center-box" flex="1">
<xul:hbox class="checkbox-label-box" flex="1">
<xul:image class="checkbox-icon" xbl:inherits="src"/>
<xul:label class="checkbox-label"
xbl:inherits="value=label,accesskey,crop" flex="1"/>
</xul:hbox>
</xul:hbox>
</content>
</binding>
<binding id="radio-crop"
extends="chrome://global/content/bindings/radio.xml#radio">
<content>
<xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled">
<xul:hbox class="radio-check-box2" flex="1">
<xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/>
</xul:hbox>
</xul:hbox>
<xul:hbox class="radio-label-box" align="center" flex="1">
<xul:image class="radio-icon" xbl:inherits="src"/>
<xul:label class="radio-label"
xbl:inherits="value=label,accesskey,crop" flex="1"/>
</xul:hbox>
</content>
</binding>
<binding id="radio-crop-with-spacing"
extends="chrome://global/skin/globalBindings.xml#radio">
<content>
<xul:hbox class="radio-spacer-box">
<xul:hbox class="radio-check-box1" xbl:inherits="selected,checked,disabled">
<xul:hbox class="radio-check-box2" flex="1">
<xul:image class="radio-check" xbl:inherits="selected,checked,disabled"/>
</xul:hbox>
</xul:hbox>
</xul:hbox>
<xul:hbox class="radio-label-center-box" flex="1">
<xul:hbox class="radio-label-box" flex="1">
<xul:image class="radio-icon" xbl:inherits="src"/>
<xul:label class="radio-label"
xbl:inherits="value=label,accesskey,crop" flex="1"/>
</xul:hbox>
</xul:hbox>
</content>
</binding>
</bindings>
然后当crop
属性存在时 CSS 应用绑定(checkbox_radio_crop.css):
checkbox[crop] {
-moz-binding: url('checkbox_radio_crop.xml#checkbox-crop');
}
checkbox-with-spacing[crop] {
-moz-binding: url('checkbox_radio_crop.xml#checkbox-crop-with-spacing');
}
radio[crop] {
-moz-binding: url('checkbox_radio_crop.xml#radio-crop');
}
radio-with-spacing[crop] {
-moz-binding: url('checkbox_radio_crop.xml#radio-crop-with-spacing');
}
然后我们可以根据您在问题中提供的内容使用一些 XUL 对其进行测试:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="checkbox_radio_crop.css" type="text/css"?>
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="center" flex="1">
<groupbox >
<caption label="Test checkboxes"/>
<checkbox crop="start" style="max-width: 35em;" label="crop="start" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198 crop="start" "/>
<checkbox crop="center" style="max-width: 35em;" label="crop="center" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
<checkbox crop="end" style="max-width: 35em;" label="crop="end" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
<checkbox style="max-width: 35em;" label="no crop 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
</groupbox>
<groupbox>
<caption label="Test radios"/>
<radiogroup>
<radio crop="start" label="crop="start" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198 crop="start"" />
<radio crop="center" label="crop="center" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
<radio crop="end" label="crop="end" 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
<radio label="no crop 1415926535897932384626433832795028841971693993751058209749445923 0781640628620899862803482534211706798214808651328230664709384460 9550582231725359408128481117450284102701938521105559644622948954 9303819644288109756659334461284756482337867831652712019091456485 6692346034861045432664821339360726024914127372458700660631558817 4881520920962829254091715364367892590360011330530548820466521384 1469519415116094330572703657595919530921861173819326117931051185 4807446237996274956735188575272489122793818301194912983367336244 0656643086021394946395224737190702179860943702770539217176293176 7523846748184676694051320005681271452635608277857713427577896091 7363717872146844090122495343014654958537105079227968925892354201 9956112129021960864034418159813629774771309960518707211349999998 3729780499510597317328160963185950244594553469083026425223082533 4468503526193118817101000313783875288658753320838142061717766914 7303598253490428755468731159562863882353787593751957781857780532 171226806613001927876611195909216420198"/>
</radiogroup>
</groupbox>
</dialog>
当使用上述测试 XUL 打开一个对话窗口时,将显示以下内容:

要使其在您的 XUL 中工作,您将需要文件checkbox_radio_crop.xml和checkbox_radio_crop.css。然后,您需要添加以下行:
<?xml-stylesheet href="checkbox_radio_crop.css" type="text/css"?>
到您的 XUL。显然,这些文件当前正在使用相对 URL 来引用这些文件。因此,它们需要位于与 XUL 相同的目录中。当然,您可以通过使用完全限定chrome://
的 URL 来引用 CSS 和 XUL 中所需的文件,将文件放置在您想要的任何位置。
虽然上述更改可以放在 Firefox 中,但它们需要去的地方实际上是跨多个文件。因此,它有点复杂。我将看到有关使用需要更改以进行修复的代码来更新Mozilla 错误的信息。此外,我将处理 MDN 文档,crop
以明确它不适用于<checkbox>
&<radio>
元素。我还将提供此代码作为 polyfill。