firefoxではdisplay:boxを指定すると、widthの相対値が無視される

firefoxのバージョンは17.0.1なので他のバージョンは違うかも。こんなページがあって。

<div id="wrap">
  <div class="shop">
    <section class="photo">
    <img src="./imgs/photo.jpg" width="150" height="150" />
    </section>
    <section class="shop_txt">
      <article class="info">
        <h2>ラーメン屋</h2>
        <p>おいしいラーメンがあります。</p>
      </article>
    </section>
  </div>
</div>

要素を横に並べるのにcss3から追加されたdisplay:boxを使う。これまでfloatで横に並べてclearfixを使ったりしてたけどこれのおかげで少し便利になった。とのことで実際に使ってみる。cssはこんな感じ。

img{
width:100%;
}

#wrap{
width:100%;
margin:0 auto;
padding:20px 0;
}

.shop{
width:80%;
margin:0 auto;
display:-moz-box;
display:-webkit-box;
box-orient:horizontal;
}

.photo{
width:20%;
}

.shop_txt{
width:80%;
padding:0 0 0 20px;
}

これで要素は横並びで、かつ画面サイズに合わせて横幅が自動で変わるはず。ところがfirefoxでは相対値で指定したwidthが無視されて、画面サイズを変えても横幅が変化しない。pxで指定しちゃうと、もちろん幅が変わらないからスマホ対応にあまり意味がない。メディアクエリでわけるならいいんだけど、PCやスマホでcssをわけたくないみたいなときに困る。まぁ、手抜きせずにわけろよって話しなんですけどね。残念だけど、この場合はfloatを使った通常の横並びが必要。