Blog Top

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

display:inlineでリストを横並びにすると隙間が出来る

display:inlineでリストを横並びにすると、何故かFirefoxやChromeなどのブラウザでliとliの間に隙間が出来る。

隙間ができるコード


ul li {
	display:inline;
	background:#ccc;
}

<ul>
	<li>サンプル</li>
	<li>サンプル</li>
	<li>サンプル</li>
	<li>サンプル</li>
	<li>サンプル</li>
</ul>

隙間をなくすには、コードを一列で書くか、liとliの間をコメント化する。

コードを一列で書く


<ul><li>サンプル</li><li>サンプル</li><li>サンプル<li><li>サンプル</li><li>サンプル</li></ul>

liとliの間をコメント化


<ul><!--
	--><li>サンプル</li><!--
	--><li>サンプル</li><!--
	--><li>サンプル</li><!--
	--><li>サンプル</li><!--
	--><li>サンプル</li><!--
--></ul>

このどちらかの記述方法で、liとliとの間に隙間が出来なくなる。

position:absoluteを指定するとIE6でずれる

zoom:1でデフォルトスタイルをリセットするのを止めてから、ちょくちょくIEでのブラウザ崩れと遭遇する。今回もその一つ。

今回遭遇したのは、position:absoluteで位置を指定すると、IE6だと要素がずれて表示されるバグ。

absoluteを指定した要素をbottomを基準に表示しようとすると、他のブラウザではrelativeを指定した親要素の下を基準にちゃんと表示されるのに、IE6ではそれが無視されてしまう。


p {
     padding:0;
     margin:0;
}

div#contents{
     position:relative;
     margin:0 0 10px;
     border:1px solid #ccc;
}

div#contents p#zettai{
     position:absolute;
     bottom:0;
     right:0;
}

<div id="contents">
       <p>サンプル</p>
       <p id="zettai">絶対配置</p>
</div>

<p>テスト</p>

これを解決するには、absoluteを指定している要素の親要素にheightかwidthを指定する。今回の例だとcontentsに指定する。


p {
     padding:0;
     margin:0;
}

div#contents{
     position:relative;
     margin:0 0 10px;
     border:1px solid #ccc;
     width:300px; /* もしくはheightを指定 */
}

div#contents p#zettai{
     position:absolute;
     bottom:0;
     right:0;
}

<div id="contents">
       <p>サンプル</p>
       <p id="zettai">絶対配置</p>
</div>

<p>テスト</p>

これでIE6でも他のブラウザと同じように親要素のbottomを基準に表示される。

preにoverflow:autoを指定するとIEでずれる

以下の様にpreタグにwidthとoverflow:autoを指定すると、何故かIE6,7ではコンテンツがずれて表示される。


pre {
     overflow:auto;
     width:100px;
}

<pre>サンプルサンプルサンプル</pre>

具体的には、下にスクロールバーが表示されるだけで、コンテンツが全く見えない状態になる。

調べた所、どうやらこのような表示になるのは、コンテンツがwidth以上の長さになった時だけらしい。指定したwidth内でコンテンツが収まるのであれば、正常に表示される。(当たり前か)

つまりIEさんだけoverflow:autoがうまく働いてくれていない…

IEでもずれない様に表示させるにはpreタグにheightを指定するか、overflowの値をautoからscrollに変更する。このいずれかを指定することで、IEでもコンテンツが表示されるようになる。


pre {
     overflow:scroll;
     width:100px;
}

<pre>サンプルサンプルサンプル</pre>

久しぶりにIEでハマった…。

検索フォーム


RSSリンクの表示

QRコード

QR

問い合わせ

当ブログ管理人への問い合わせはこちらのフォームからお願いします。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。