为什么背景没有出现？ （CSS问题）

Question

我有以下Xul：

<?xml version="1.0"?>

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

<window width="400" height="300"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <vbox id="backBox">
        <hbox id="frontBox">

            <!-- this label is needed, else this box doesn't show up -->
            <label value="" />

        </hbox>
    </vbox>

</window>

使用以下CSS：

#backBox {
    background-color: red;
    width: 200px;
    position: fixed;
    left: 0;
}

#frontBox {
    background-color: blue;
    width: 100px;
    position: fixed;
    left: 0;
}

我希望看到一个200px的红色盒子，里面有一个100px的蓝色盒子。但我所看到的只是100px蓝盒子。

为什么红框（id =“backBox”）没有显示？

Answer 1

这里应该发生的是，两个方框都应该拉伸到窗口的宽度，因为你没有告诉他们没有，并且容器默认伸展他们的孩子。如果你想让他们的盒子尊重他们的CSS宽度，你需要改变他们的对齐方式，这可以通过align =“start”属性或CSS -moz-box-align：start;来实现。但请注意，这些属于父母，即窗口和vbox。