読者です 読者をやめる 読者になる 読者になる

yaotti's diary

QiitaやKobito、Qiita:Teamを作っています。Software is Eating the World

さくせん: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;
}


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