왜 배경이 보이지 않습니까? (CSS 문제)

Question

나는 다음과 XUL을 다음 CSS와

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

는 :

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

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

은 내가 200 픽셀 빨간색 상자를 볼 것으로 예상하고, 내부 100 픽셀 파란색 상자. 그러나 내가 보는 것은 단지 100px 파란색 상자입니다.

빨간색 상자 (id = "backBox")가 표시되지 않는 이유는 무엇입니까?

Answer 1

여기서 일어날 일은 상자를 창 너비로 늘려야한다는 것입니다. 왜냐하면 그렇게하지 말라고 말하지 않았기 때문에 컨테이너는 기본적으로 자식을 늘려야하기 때문입니다. 상자의 CSS 폭을 존중 시키려면 align = "start"속성 또는 CSS -moz-box-align : start; 그러나 이것들은 부모, 즉 창과 vbox에 속한다는 점에 유의하십시오.