liでメニューをマークアップ

過去にblogで書いていた件

よく（？）あるメニューで、例えば以下のようなページのトップの部分のように
http://kengo.preston-net.com/archives/000886.shtml

SO MANY SMILES | PRESTONCAFE | BLOG | WIKI | PHOTO | SHOP | NEWS | RSS ANTENNA | RSS MEMO | WEMA

な表現をしたいときがある。
さて問題はここの「｜」をどう表現するのがHTML的に正しいか？っていうところなのです。マークアップ的には

<ul>
	<li>menu1</li>

	<li>menu2</li>
	<li>menu3</li>
</ul>

で決めることにすると…CSSにはどう実現するか、っていう問題になるわけ。まぁ、display:inlineは当然入れるとして…例えばnetscape、opera系のブラウザであれば「:after」擬似要素と「content」プロパティを用いて

li:after{ content:"|";}

で良いわけだが、IEだとこれは表示されない。

ええいそれじゃあ、区切り文字はliとliの間にっとか思って

<ul>
	<li>menu1</li> |
	<li>menu2</li> |
	<li>menu3</li>

</ul>

これをやるとDTD(http://www.w3.org/TR/REC-html40/struct/lists.html#edef-UL)的にはulの中にはliしか書けないわけだからNGですよと。

ほいじゃ

<ul>
	<li>menu1 | </li> 
	<li>menu2 | </li>

	<li>menu3</li>
</ul>

こう書くのが正しいんですか？って思ったわけ。

しかしこの手法には相当大きな問題点がある。CSSをオフにされると

・menu1 | 
・menu2 |
・menu3

というような謎見た目になってしまうじゃないですか、と。やっぱり結論は

<ul>
	<li>menu1</li>
	<li>menu2</li>

	<li>menu3</li>
</ul>

li {
    display:inline;
    border-right-width: 1px;
    border-right-style: solid;
}

でいいのでしょうか。（もちろん実際には最後のliにはborderがつかないようにclassで分けますが。ご意見お待ちしています。っていうか「｜」ならborderでごまかせるけど、「/」とか別のもの入れたくなった場合はどうよ。