a:hover疑似クラスで背景指定した場合の注意点（IE6）

IE6でa:hover疑似クラスで背景指定した場合の注意点の覚書。

.content-nav li a {
  display: inline-block;
  padding: 3px 4px;
  color: #43a52a;
  background: #ffffff;
  border: 1px solid #94cc3d;
}
.content-nav li a:hover {
  color: #ffffff;
  background: #94cc3d;
  border: 1px solid #43a52a;
}

というように、背景やボーダーを指定した場合はIE6では背景が指定通りにならなかったり、隣接するボックスの挙動をおかしくしたりします。

そんな場合は面倒でも、

.content-nav a {
  display: inline-block;
  padding: 3px 4px;
}
.content-nav a:link,
.content-nav a:visited {
  color: #43a52a;
  background: #ffffff;
  border: 1px solid #94cc3d;
}
.content-nav a:hover,
.content-nav a:active {
  color: #ffffff;
  background: #94cc3d;
  border: 1px solid #43a52a;
}

と、すべてのa:疑似クラスを順番に指定すればいいようです。

隣接したボックスへの対策には、

_zoom: 1;  
overflow: hidden;

を指定することで回避できることもありますが、面倒がらずに原因個所の記述をしっかりしたほうが後々の保守なためにも精神衛生上よろしいようです。