word-breakに関して

普通、半角英数字に関してはブラウザで折り返ししてくれないのですが、
それを折り返すために以下のように書いたりするのですが、
IE独自の仕様のためFirefox等のブラウザでは別途対応が迫られてしまいます。

.word_break {
    word-break: break-all
}

で、折り返しをするためにJavascriptを使うのが定石だと思っていたのですが、
CSSの記述だけでいけるってのを教えてもらって、それを何度か使っていたくせに
毎回書き方を聞かれて忘れているのでメモしておく。

.word_wrap {
    word-wrap: break-word;
}

若干情報が古いですが、よくまとまっているので参考。
http://blog.sakurachiro.com/2010/06/control-break/

CSSで上下に中央寄せする方法

ここに書かれていた。
書き方としては以下の通り。
IE6と7以外に関してはtable-cellを使う。
IE6と7に関してはインライン要素として扱うと、「vertical-align」が使えるようになるので、下記のような記述になっている。
ちなみに下記に書かれている「* html」はIE6用のハックで、「*:first-child+html」はIE7用のハックである。
これを記述した場合にはそれぞれのブラウザでしか反映しないに出来る。

div {
    display:table-cell;
    margin-bottom:1px;
    vertical-align:middle;
}

/* IE 6 hack */
* html div {
    display:inline;
    zoom:1;
}

/* IE 7 hack */
*:first-child+html div {
    display:inline;
    zoom:1;
}

IE6でfirst-childとlast-childを使うには

IE6でfirst-childやlast-childを使いたい場合には以下のようにする。
例)背景色を変えたい場合

* html div {
    background-color: expression((this.parentNode.firstChild == this) ? '#FFB6C1': '#DADADA';
}

ちなみに同じ要素に対して、first-childとlast-childを使いたい場合は以下のようにする。

* html div {
    background-color: expression((this.parentNode.firstChild == this) ? '#FFB6C1' : (this.parentNode.lastChild == this) ? '#ADD8E6' : '#DADADA');
}

とこういった感じでやる。
ちなみに上記はIE6のみに適用するように記述してある。
expressionとかをいっぱいやりすぎるとサイト全体が重くなるので要注意。
ただでさえJavascriptの処理が遅いIE6で連発するのは危険。
どうしようもない場合にこれを使う位の感じで使った方がよい。

ついでに調べていたらexpressionはやたらめったら評価されてしまうので、
one-time expressionを使いましょうって記事がありました。
以下が例です。（時間によって適用される背景色が変わるようになっているみたいです。）

<style>
P {
    background-color: expression(altBgcolor(this));
}
</style>
<script>
function altBgcolor(elem) {
    elem.style.backgroundColor = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF";
}
</script>

expressionが設定されているスタイルを上書きするようになってるみたいです。
確かにこれなら一度評価された時点で上書きされてしまうので、
何度も評価される事態を回避できます。
これならある程度の数を使っても大丈夫そうです。

word-breakに関して

今まで知らなかったんですが、JavaScript使わなくても大抵のブラウザで対応できるみたいです。

.word_wrap {
    word-wrap: break-word;
}

たったこれだけでいいの！？と思って確認してみると確かにいけました。
すごい！！

こちらの記事を参照しました。

画像をdivで括り高さや幅を指定し、aタグで括るとIEで画像部分をクリックしてもリンクしない

画像をdivで括って高さや幅を指定してからaタグで括るとIEではカーソルもpointerにならず、
画像をクリックしてもリンクしないという現象があった。
また互換モードだとspanタグも同様の現象が見られる。

例）リンク可能な記述


例）リンク不能な記述(imgタグをdivタグで括り、幅を指定した場合)

例）リンク不能な記述(imgタグをdivタグで括り、高さを指定した場合)

今のところの解決策は特に見つかってない。
Javascriptで対応するくらいしかないのか・・・。