CSSのメモ

IEなんて使いたかねぇし、対応なんてしたくねぇンだよ、ちくしょう

URLが長くなって、ブロックのwidthを超えてしまう場合、IEでも火狐でも折り返しはしてくれない。

IEはブロックを伸ばし、火狐では超えた内容がブロックからはみ出る。

ブロックを伸ばすIEの糞仕様のおかげで、float:leftをかけていたエリアが伸び、その左側のブロックを押し下げやがった。

<div id=”contents” style=”width:30px;”>

<div id=”left” style=”width:10px;float:left”>

<a href=”http：//www.xxx.jp/”>※ここが長い</a>

</div>

<div id=”right” style=”margin-left: 20px;width:10px”>

ほげ

</div>

</div>

このパターンで、id=”right”のブロックが、id=”left”のブロックの下に表示される、つう現象だ。（IEだと、id=”contents”のwidthは30pxではなく、たぶん、36pxになる。これもIEの腐った仕様）

そういうときのおまじないが、IEの独自拡張CSSで対応できるらしいというのがわかったのでメモしておく。

word-break: break-all;

IE7は火狐とおなじ仕様のようで、IE6だけの問題。ただ、IE6でもIE7でもこの独自仕様CSSは動くので、同じ見た目になるようだ。