スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSでwidthとpaddingを指定するとIE6の表示がおかしくなる

題名にもあるようにCSSでwidthとpaddingやborderを指定するとIE6の表示がおかしくなります。IE6は意外と使っていることが多く、サイトによってはIE7より多かったりするのでほっておくことももったいないかもしれません。
ブラウザによる違いのないコードを書けばいいわけですが、これはIE6のバグっぽいのでIE6にだけ適応するCSSを指定してあげるのがいいのかなと思います。

まず具体的にどのように表示がおかしいかというと以下のCSSの場合

.box{
       width:100px;
       padding:5px;
       border:5px;
}
通常の解釈: ボックスの長さは120px
IE6の解釈: ボックスの長さは100px

つまり、IE6の場合widthはpaddingやborderを含めたものになります。

一緒に使わなければいいわけですが面倒だし、これは結構致命的なので何とかしようと調べていたところ色々方法がありました。

.box{
       width:100px;
       padding:5px;
       border:5px;
}

* html .box{
       width:120px;
       padding:5px;
       border:5px;
}

このようにしてあげると下のものがIE6のみに適用され同じように表示されます。

こんなこと言いつつこのブログはIE6に最適化されてない...

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
記事とは関係のない質問ですがいいでしょうか?

http://solidstate.jp/ImageDisplay/slideshow/script_161.html
これの設置方法わかりますか?

書き換えをしたのですが
IEでは表示されるのですが
FireFoxでは表示されません。
http://blog-imgs-36.fc2.com/p/s/p/pspsi77i/index.html

これのやり方わかりませんか?
お忙しい中申し訳ないです
【2010/04/03 22:39】 | - #uf0ZjNlk | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。