width指定時の横幅

width/padding/borderの扱い方が，InternetExplorer(以下IE)/OperaとMozillaでは異なるようだ．

細かいバージョンは以下の通りで，全部Windows2000 Professional+SP3上で動いている．

InternetExplorer 6.0.2800.1106+SP1+細かい更新が色々
Opera日本語版 7.03
Mozilla1.3(Wazilla1.3)

例えば，以下のhtmlを表示したとしよう．

<html>
  <style type="text/css">
    #width-sample1{
      width:100%;
      background:#dcdcdc;
    }
    #width-sample2{
      width:100%;
      background:#dcdcdc;
      padding:1em;
    }
    #width-sample3{
      width:100%;
      background:#dcdcdc;
      padding:1em;
      border:5px solid black;
    }
  </style>
  
  <body>
    <div id="width-sample1">
      sample1:widthは100%なのさ～．
    </div>
    <div id="width-sample2">
      sample2:widthは100%なのさ～．paddingを指定したのさ～．
    </div>
    <div id="width-sample3">
      sample3:widthは100%なのさ～．paddingとborderを指定したのさ～．
    </div>
  </body>
</html>

IE/Operaでは，sample1/2/3全て同じ横幅となる．Mozillaの場合は，横幅が異なり，sample1<sample2<sample3となる．仕様から言うとMozillaが正しいらしい．CSS1/2ではwidthはpaddingやborderを含まない幅のことで，width+padding+borderが表示する幅となる．個人的には，paddingやborderまで含めてwidthを表示するIEやOperaのほうが扱いやすいと思う．

Mozillaにpadding/borderの幅まで含めてwidthを表示させるには，-moz-box-sizingの指定を行う．CSS3には属性box-sizingがあるが，CSS3自体がまだ固まっていないし対応しているブラウザもないので，指定しても意味がない．

<html>
  <style type="text/css">
    *{
      box-sizing:border-box; /* CSS3なのでまだ使えない */
      -moz-box-sizing:border-box; /* Mozillaの隠し属性らしい */
    }
    #width-sample1{
      width:100%;
      background:#dcdcdc;
    }
    #width-sample2{
      width:100%;
      background:#dcdcdc;
      padding:1em;
    }
    #width-sample3{
      width:100%;
      background:#dcdcdc;
      padding:1em;
      border:5px solid black;
    }
  </style>
  
  <body>
    <div id="width-sample1">
      sample1:widthは100%なのさ～．
    </div>
    <div id="width-sample2">
      sample2:widthは100%なのさ～．paddingを指定したのさ～．
    </div>
    <div id="width-sample3">
      sample3:widthは100%なのさ～．paddingとborderを指定したのさ～．
    </div>
  </body>
</html>

また，Operaの場合box-sizing:border-bix;を指定すると，リンクの下線が消える．例えば，以下のhtmlをOperaで表示すると，googleへのリンクには下線がない．

<html>
  <style type="text/css">
    *{
      box-sizing:border-box;
    }
  </style>
  
  <body>
    <a href="http://www.google.co.jp/">googleへリンクしたのさ～</a>
  </body>
</html>

明示的に下線を指定すれば対処できる．

<html>
  <style type="text/css">
    *{
      box-sizing:border-box;
    }
    a{
      text-decoration:underline;
    }
  </style>
  
  <body>
    <a href="http://www.google.co.jp/">googleへリンクしたのさ～</a>
  </body>
</html>