さくせん：IEつかうな

IEに苦しめられたのでメモ。

画像の位置をCSSで配置したコンテンツとあわせようとしたら、IEだけうまくいかない。

調べてみたところ、IEではwidth、heightといっしょにborderを指定すると、borderも合計してwidth、heightを計算するらしい。

たとえば

• width:100px
• border:10px

をCSSで指定すると、

• firefoxの場合：幅は100px
• IEの場合：幅は120px

となる。

回避策としては、ボーダーを使わない。
ボーダーをつけたいコンテンツの外側にdiv要素をつくり、
ボーダー色のついた背景の内側に白の要素を置く。

以下例。

<div id="square">
<p>piyopiyo</p>
</div>

これを黒で囲みたいときは

#square{
width: 100px;
height: 100px
border: 10px solid #000000;
}

とはせずに、

<div id="wrap">
<div id="square">
<p>piyopiyo</p>
</div>
</div>

とし、CSSは

#wrap{
width: 120px;
heith: 120px;
background: #000000;
}
#square{
margin: auto; /*これは状況に応じて変える*/
width: 100px;
height: 100px;
background: #ffffff;
}

みたいに分けて作ると幸せになれるよ！