livedoor
アフィリエイトは儲かんないってば2008年04月29日13:44
デザインカスタマイズをするために、もとになるデザインテーマを探していたら、良さげなテーマ「illust-mountain」があったのですが、IE6での表示が気になる部分が３ヶ所ありました。自己流でIE6に対応させてみました。
もうあんまりIE6を使っている人はいないのかもしれませんが、自分がIE6を使っているので、気になります。
細かい事かもしれませんが、デザインをカスタマイズするにも気になって先に進めないので、IE6に対応させてみました。
最初に気になったのはこの部分。
IE6で見た際、エントリーの下に謎の背景画像が出現しています。
CSSの中の/** 記事フッター */という部分のdiv.article-outer-3のマージンを0にしたら無くなりました。
margin-bottom: 20px; → margin-bottom: 0;
なぜかFirefoxでの表示も変わらなかったので、問題ないかなと。
次に気になったのはサイドバーです。
IE6でみると、タイトル部分が微妙に切れていて、下の方に謎の空白が出来ています。
/** 08. Sub & Extra - プラグインエリア */
div.sidetitleに下記の部分があります。
padding: 30px 10px 0 55px;
height: 28px;
これを下記のように修正すると、タイトルが切れなくなりました。
padding: 30px 10px 10px 55px;
height: 18px;
それから、div.sidebottom に font-size: 0;を追加すると謎の空白は消えました。
div.calbottom に font-size: 0; を追加。
CSSを再構築すると、あれ？カレンダーだけ元のままだ。
XHTMLを見ると、カレンダーだけ要素が別でした。
div.calendarheadbody div.calendarheadの下記の部分を探します。
padding: 30px 10px 0 55px;
height: 28px;
これを下記のように修正します。
padding: 30px 10px 10px 55px;
height: 18px;
div.calbottom に font-size: 0; を追加。
自己流ですが、一応Firefoxでの見た目は変わらずに、IE6の表示の気になる部分を修正できました。
気になる方はお試しくださいませ。
さてと、このテーマを元にデザインカスタマイズをやってみましょうか。
この記事へのコメント
|
党利すがり
2008年04月29日 14:55
|
知り合いのブログのカスタマイズをやってたんですが、
IE6だけﾊﾞｶｽｗｗでしたね。 他のブラウザは何も問題無いのに、 IE6だけレイアウトやらが崩れる。 どうしてIE6はこういう事が起きてしまうんすかね？ 単純にCSSについてこれてないだけ？ |
|
afiliate
2008年04月29日 15:56
|
どおも〜党利すがりさま。
今回の件でちょっとググってみたら、バグを集めたサイトがありました。 http://cssbug.at.infoseek.co.jp/detail/winie.html ちょｗｗｗ多すぎｗｗｗ。 しかも、↑これを見ても今回の原因が何か理解できなかったので、いろいろとCSSを変更して試してみました（笑）。 IE6以下のバーションがCSSを独自に解釈しているみたいです。どちらかと言えばFirefoxが正しい解釈みたいですよ。なぜそういうことになっているかは、もちろんわかりませんけども。 |
|
shu
2008年06月27日 14:49
|
検索でたどりつきました。
微妙に気になっていた部分が、詳しく解説されていたので CSSの知識がない私でも、おかげさまで表示がきれいになりました。 ありがとうございます。 |
|
afiliate
2008年07月03日 10:52
|
どおも〜shuさま。
お、きれいになりましたか！ IE7やFirefoxが主流になってきているとは思いますが、私、未だIE6です（笑）。この微妙な部分が気になり記事にさせて頂きました。 お役に立てて、うれしいです♪ コメントありがとうございました〜。 |
この記事にコメントする
注：livedoorBlogの仕様により、コメントは400字以内となっております。
コメントが長くなりそうな場合は、
メモ帳にコピペなどされておかれることをお勧めいたします。
