liの中のaのテキストリンクのボーダーが消える
body { margin: 0 ; line-height: 1 ; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; background-color: white ; } li { height: 2em ; /* ここ */ padding-top: 2px ; } li a { display: inline ; margin-right: 8px ; color: #5f7a96 ; text-decoration: underline ; } li a:hover { margin-right: 8px ; color: #999 ; text-decoration: none ; }
IEでブロック要素(li)の中にアンカータグを入れたとき、
liを広げてあげないとアンカータグのテキストリンクのボーダーが出てこない。ことがある。
参考:
Internet Explorer (Windows) CSSバグリスト
http://cssbug.at.infoseek.co.jp/detail/winie/b092.html
line-heightプロパティに小さい値を指定することで行高を低くしているとき、行高の算出値の範囲を超える部分が表示されず、文字が欠けてしまう。
そうだったのか
line-height: 1 ;
は危なそう。