a要素を:hoverすると、親要素の高さが小さくなる | 有限会社キートン KEYTON Co. Inc.

作成中のホームページで「ページトップへ戻る」リンクの下に、リンクを追加したところ、IE7、6でアンカーにhoverするとその親要素が伸び縮みするという不具合が起こりました。［サンプルページ１］

ソースは以下の通りです。（検証用のため、簡略化しています）

［htmlソース：sample1.htm］

<body>
	<div id="header" class="clearfix">
		<p>上のdiv要素</p>
		<p><a href="#header">上へ戻る</a></p>
		<p id="back"><a href="index.htm">戻る</a></p>
	</div>
	<div id="footer"><p>下のdiv要素</p></div>
</body>

［cssソース：sample1.css］

/*reset*/
* {margin: 0;padding: 0;}
div#header {
	background : #fee;
}
div#footer {
	background-color : #eef;
}
a:link , a:visited {
	background-color: #efe ;
}
a:hover {
	background-color: #eee ;
}
/*アンカー 前のページに戻る*/
p#back {
	margin-bottom :1em;
}
/* clearfix */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

googleで調べてみると、同じような不具合が見つかりました。アンカーを:hover状態にすると親ブロックの高さが変化する［『CSSバグ辞典スレッド』の要約］（現在ページがなくなっているため、InternetArchiveへリンク）

しかし今回の不具合では、

ブロック要素の入れ子は2つ
5番目の「内側から3番目のブロックに任意の幅を設定している。」という指定はない。（そもそも3番目のブロックが無い）

であるので条件に当てはまりません。

色々とためしてみたところ、clearfixを解除すると不具合は起こらなくなりました。

IEの場合clearfixは、hasLayout=tureにすることで実現しているので、hasLayoutが絡んでいるかもしれないと思い、検証用にサンプルファイルを作りました。［サンプルページ2］

［htmlソース：sample2.htm］

<body>
	<div id="header">
		<p>上のdiv要素</p>
		<p><a href="#header">上へ戻る</a></p>
		<p id="back"><a href="index.htm">戻る</a></p>
	</div>
	<div id="footer"><p>下のdiv要素</p></div>
</body>

［cssソース：sample2.css］

/*reset*/
* {margin: 0;padding: 0;}
div#header {
	background-color : #fee;
	zoom : 1;
}
div#footer {
	background-color : #eef;
}
a:link , a:visited {
	background-color: #efe ;
}
a:hover {
	background-color : #eee ;
}
/*アンカー 前のページに戻る*/
p#back {
	margin-bottom :1em;
}

上記の例でも、div要素が伸び縮みしました。
今回の不具合はhasLayout=tureにしたときの不具合だと思いますが、詳細は不明です。

対策

アンカー要素に指定しているmargin-bottom : 1emをpadding-bottom : 1emに変更して回避しました。