CSS {
display: inline;
}

同じところをブロック表示をしたい場合

CSS {
display: block;
display: inline;
}

２つのCSSが同じdisplayなのでダメなのでは？と思いますし、
CSS的には不正なのかもしれないが、Safari, Chrome, Firefox, Oera, IE8, iPhoneなど
でも問題なく表示されて機能しているので、だいじょうぶでしょう。

このブログはIE6は無視してますが、まだまだIE6を最低限考慮しないと
いけいない状況ですしね。

結論：widthを指定する

HTML5からは、角丸が画像を使わずCSSだけでできるみたいだし、javascriptやtable小技でやったりもあるが、IE6を考えてまだ画像でやるのが一般的。

divタグで空にしてheight指定で背景に角丸画像背景を入れるのだとIE6でも問題なしだがソース的に、空はちょっとマズイだろということで、top middle bottomなど3つで上下を挟むやり方でtopとbottomにpaddingを高さ指定してやる。

すると、何だかtopの下に妙な空きがIE6だとできてしまうが、widthを指定すると解消される。

ちなみに、背景画像bottomなんかを超縦長にしておけば、divがtop bottomと２つですむ。PNGでも以外に超縦長の画像は、容量が増えないので縦可変の激しくないある程度の高さですむ場合は、ソースが軽くなる背景超縦長バージョンがいいかと。

あと、

縦並びul li aもIE6だと変な上下の幅ができるがこれもwidthを指定すると解消される。
これも忘れてたので、備忘録。

高さをaに height ではなく line-height 指定 pxがわかり良い（必須）
幅をaに width 指定 pxがわかり良い（必須）←縦並びでも指定しないとIE6縦間隔おかしくなる

縦並びであれば、floatいらず、
横並びであれば、liがあればliをfloat
何もなければa floatでOKだが、liがある状態でa floatだとIE6おかしくなる。
liは、縦並びでも横並びでもwidth, height, line-heightいらずだが、
aのブロック表示にwidth, line-height（height）の両方を必ず指定。

いまいち毎回忘れるので、備忘録。

<ul>
<li><a href=”/”>a</a></li>
<li><a href=”/”>b</a></li>
<li><a href=”/”>c</a></li>
</ul>

なんて、メニューを横並びにa要素をブロック表示にして、floatで
回り込みさせるやり方で、これまたIE6の対応のために。

aタグに幅や高さを指定してfloatさせるんですが、aタグのCSSに
floatを指定するとIE6では階段状のように段々に下にずれていく。

解決策としては、aタグにdisplay: blockと幅高さ指定し、
liタグにfloatを指定する。こうすればIE6でもだいじょうぶ。

追記：

失礼しました。<ul><li>のみの現象でした。普通にaタグだけのソースなら
aタグにfloat CSSしても段々にずれることなくだいじょうぶでした。

<a href=”/”>a</a>
<a href=”/”>b</a>
<a href=”/”>c</a>

これまた、IE6の現象なのでそろそろどうでもいいとえば、
どうでもいいのですが、a:visitedとa:hoverの位置をCSS記述上で
a:visitedを後にa:hoverを前に書くとover時におかしなことになる点について。

a
a:visited
a:hover

こうするとvisited後でもhover時に、overが正常に反映される。

a
a:hover
a:visited

こうするとvisited後だとhover時にvisited要素が表示される。
もちろん、要素がかぶってなければ問題ないですが。

通常、visited要素がhover要素を上回るってことはないはず。
よって、a:hoverを下に記述するといいってことかな。

main-bottomに、clear: both;

<div id=”main”>
<div id=”left”>
</div>
<div id=”right”>
</div>
<div id=”main-bottom”>
</div>
</div>

しかし、IE6ではこれでもアレ？ってことがあってclear: both;と同時に
幅の指定もしっかりするとIE6でも正常に機能します。

floatする時は、幅指定をしましょう！というのは通説ですが、
clearする時にも幅指定をしっかりしましょう！ということに
なるでしょうか。

あまり使う必要もなく、しっかりと認識していなかったので。

普通、idだけとかclassだけとかで事足りてしまうので、
意識してなかったですが、やり方によっては便利な2つ化。

指定方法は、

• #a.b　もちろん#aと.bバラでも。
• .b　で統一して、セレクト的に　.c　を使ったりできますね。

class2つでの発想としては、classを変えたいのだけ置き換えてではなく、
classをもう一つ付け加えて対応させるという発想ですね。

今までは、以前使っていた手間の掛かるCSSを引っ張り出して、
入れ替えて何てやってましたが、最近では0から書いた方が
速いことが多くなってきました。

CSSは省略化を考えずガンガン突っ込んでいくという考え方は
変わってませんが、省略化も綿密に考えるのも面白いなぁと
思えてきました。まぁそこに時間かけても意味ないですけどね。