リストタグを回り込みして横並びのメニューを作っていたときにブラウザごとで表示が異なったのでメモメモφ(.. )

IE７以降や、Firefox・Chrome・Sleipnir・Safari・Operaでは問題なかったのですが、IE６以下では、回り込みすらせず、親要素の幅まで広がってしまった。

横並びにしたいブロック要素の幅を固定にすれば問題は解決できるのですが、今回は使う人によってテキストの長さが変わるという状況であったため、幅は固定せずに実装したかった。

そこで<li>タグのdisplayプロパティにinline-blockを指定することで、テキストに応じた横幅の横並びメニューがIE６でも問題なく表示することができました。

preタグはプログラムソースなどを公開するときに便利ですが、スタイルを指定しないとpreタグ内の記述がページ幅を超えてしまいます。

これを解決するひとつの手段として、スクロールバーを表示させることでページ幅に合わせた表示が可能となります。

▼サンプル

pre{
background-color : #f4f5f7; padding : 5px 5px 5px 5px; border-top-width : 1px; border-top-style : dashed; border-top-color : #cccccc;
border-left-width : 1px; border-left-style : dashed; border-left-color : #cccccc; font-size : 12px; color : #666666; overflow: auto;
}

上記のソースようにスタイルシートで指定すると、上のように表示されます。

floatによる回り込みを指定した場合、その要素にmarginを指定するとIE6で表示がずれる現象が発生します。

ブラウザごとのスタイルを用意することでも回避できますが、共通のスタイルで管理したほうが作業が楽なため、【display:inline;】を記述することをおすすめします。

記述はfloatする要素でmarginの記述があるものに【display:inline;】を追加するだけです。

▼使用例

.left{
width : 500px;
float : left;
margin-left : 10px;
display:inline;
}

ページを最上部から表示させたい場合、特に何も指定していないとページとウインドウの間に隙間ができてしまいます。

ページとウインドウの隙間をなくしたい場合には、スタイルシート（CSS）にて、

body{
margin: 0px;
}

を記述することで解消できます。

上のみを指定したいときには、

margin: 0px;　　を　　margin-top : 0px;　　と記述することで上のみ指定することができますね。

画像を表示させたいときにimgタグを使いますが、IEで表示させると下に指定していないにも関わらず隙間ができてしまいます。

他のブラウザでは隙間が発生しないようですが、IEで起こる特殊な現象です。

これを解決するためにはスタイルシートでimgタグにちょっとした記述が必要になります。

▼CSSファイル

img{
vertical-align: top;
vertical-align: bottom;
}

これを記述しておくだけでimgタグの下に隙間ができなくなります。

また、別の方法としてHTMLソースでimgタグを記述した後、改行せず、その行に続けてソースを書くことでも解消できます。

CSSで指定したほうが楽かと思います。