IE9 リスト表示の行間が離れるのを直す (CSS初心者)

ハマッタのでメモ

IE9 リスト表示の行間が離れるのを直す (CSS初心者)

「やすはるラボ」の関連リンクのリスト表示がIE9で妙に空いているの、前からわかってたんですけどね。
「ちっ」とか思いつつ調べてみました。

参考記事

• [2004/11/19] リストと普通の文の行間の設定についての質問
• [2011/6/17] CSS：ブロックレベル要素のクセとかいろいろ

  ページ内「2.2. ブロックレベル化した<a>タグ」がわかりやすかった。

詳しい解説は参考記事を見ていただくとして、やすはるラボでやったこと。


    
１）line-heightをいじっていたのでmargin、paddingを0にしてみた
    
 → １行あたりの高さが狭くなり、はっきりと１行分空いていることがわかるようになった。
　つまり・・・

　　・line-height、margin、paddingのように空間を調整するものに問題があるのではない。

　　・「２行」になっている。

　ことがわかった。







    
２）aタグにblock指定、liタグはもともとblock要素なので両方block要素
    
 → これで２行と判定されているのではないかと思い、liタグをinline要素に修正した。

なおった＼(^o^)／

CSS3　スタンダード・デザインガイド

HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応