CSS の中のタグに「display:block;」で隙間
2010/09/23
<li><a style=”display:block;”>あい</a></li>
<li><a style=”display:block;”>うえ</a></li>
<li><a style=”display:block;”>うえ</a></li>
とかの場合IE6だと、「あい」と「うえ」で隙間ができる。
これはIE6のバグっぽい。
回避策１：<li>と</li>を改行せずにつなげる。
<li><a style=”display:block;”>あい</a></li><li><a style=”display:block;”>うえ</a></li>
回避策２：横幅（width）を指定してあげる。(autoはNG)
<li><a style=”display:block;width:100%;”>あい</a></li>
<li><a style=”display:block;width:100%;”>うえ</a></li>
<li><a style=”display:block;width:100%;”>うえ</a></li>
もし、<ul>に「overflow:auto;」をかけると
IE6以外で、横向きのスクロールバーもつく。
回避策１：違うデザインで組む
回避策２：CSSハック
width:auto !important;
width:100%;
width:100%;
IE6は後に出てきた「width:100%;」が適用され、他は「width:auto !important;」が適用される。