display:block した a 要素（リンク）を IE6 でも安定させる方法はじめてのブログデザイン

Ads by Google

--/--/-- -- [Edit]

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

スポンサー広告
｜

display:block した a 要素（リンク）を IE6 でも安定させる方法

2008/02/09 Sat [Edit]

当ブログで配布中のテンプレート「h007-3middle」をカスタマイズ中の方から以下のご質問を頂きました。

右サイドバーは問題なくテーブルリンクになってますが、左サイドバーは通常のリンク（文字にポイントして指マークが出るリンク）になってしまいます。

上記のご質問の不具合は Windows の IE6 で確認でき、発生条件はテンプレートの記事部分の拡張カスタマイズと併せ、サイドバーの背景色、フォントサイズ、記事のタイトル部分の装飾などなど、多岐に及んでいますので、必ずしもテンプレートをカスタマイズした時に IE6 で発生するとは断言できません。今回、原因の追究を数日間試みていたのですが、残念ながらはっきりとした答えは見つかりませんでした。

しかし、原因（おそらく IE6 のバグ）は分りませんでしたが、解決策は発見できましたので、上記のご質問と似たような症状が発生した際は以下の解決方法をお試しください。

今回の解決方法を適用後 Mac と Windows のモダンブラウザで確認しましたが他の要素への悪影響はありませんでした。

また、Web 制作者の方も IE6 において display:block させた a 要素の挙動が不安定な時に覚えておいて損のない Tips（小技）だと思いますので、宜しければ続きをどうぞ。

それでは解決策の方法ですが

今回問題となっているサイドバー部分の大元となり width プロパティで横幅を指定してある div#secondary-column に CSS で overflow : hidden; を適用させてください。

何故これで解決するのか理由は分らないのですが、これで IE6 でも display:block させたリンクが落ち着きます。

ご存知ない方へ念のため説明させて頂くと overflow プロパティとは、ブロックレベル要素（今回 div#secondary-column）内にある要素が width 指定された幅や height 指定された高さの領域からはみ出した時の表示方法を指定する為のプロパティです。

また、値の hidden は指定された表示領域を超えた要素のはみ出した部分はスクロールバーを表示させずカットすると言った指定になります。

今回のテンプレートのサイドバー部分のデフォルトの width は 180px です。

つまり 180px 以上のモノ、例えば 200px のモノをサイドバー内に入れた時、はみ出した 20px はスクロールバーも表示されず見えなくなることをご理解ください。

ちなみに div#secondary-column は FC2 ブログの管理画面で編集可能なスタイルシート（style.css）の 324 行目付近にあります。

また、上記の修正を行う方は、右側のサイドバー部分となる 332 行目付近の div#extra-column にも同じように overflow : hidden; を追加しておいても良いかも知れません。

配布中のテンプレートにも overflow : hidden; を追加しておこうか悩んだのですが、発生条件も何故解決するのかもイマイチ分らない方法なので現状維持としています。

念のため上記の修正のサンプルソースを下に記載しておきます。

/* プラグインなどを内包【secondary-column】 */
div#secondary-column {
	overflow : hidden; /* for IE6 */
	float : left; /* 左側へ */
	width : 180px;
	text-align : left;
	background-color : #f4f5ee;
}

/* プラグインなどを内包【extra-column】 */
div#extra-column {
	overflow : hidden; /* for IE6 */
	float : right; /* 右側へ */
	width : 180px;
	text-align : left;
	background-color : #f4f5ee;
}

●自分へのメモ
テンプレートの CSS はプロパティの込み入ったセレクタの使用はなるべく避けた方が良さそう。HTML 内に div 要素を増やす方向が吉？ネガティブマージンもしばらく注意。

Prev: FC2ブログカスタマイズ～コメント送信ボタンをデフォルトに戻す～
Top: はじめてのブログデザイン
Next: IE6 で float させると親要素の border が消える CSS バグ

Comments

Track Backs

TB URL

display:block　されたaタグをIE6でも安定させる

IE6のシェアは今後縮小の方向に進むことは自明のことかと思いますが、いまだに25%ものシェアがある為、対応はせざるを得ないというケースもまだまだ多いと思われます。私のかかわっております案件で先日IE6対応を行った際役に立ったTIPSをご紹介します。表題のケースで�...

display:block　されたaタグをIE6でも安定させる

Top: はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして！齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください！

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか？

はじめてのブログはFC2ブログで良いと思うに一票。