PSPブラウザとCSS

PSPブラウザ向けサイトのCSSをいじくっててちょっとひっかかったことがあったので、覚書程度に書いてみます。

NetFrontのバグと言っていいのかどうかは微妙なところですが。

<div id="container">
<div id="main">
<ul>
<li class="list01"><a href="#">リスト1</a><a href="#">リスト1-2</a>
<div style="display:none;"><ul>
<li><a href="#">リスト1非表示要素</a></li>
</ul></div></li>

<li class="list02"><a href="#">リスト2</a><a href="#">リスト2-2</a>
<div style="display:none;"><ul>
<li><a href="#">リスト2非表示要素</a></li>
</ul></div></li>

<li class="list03"><a href="#">リスト3</a></li>
</ul>
</div>
</div>

例えばこんなソースがあるとします。

構造としてはmixiのグローバルメニューと同じです。

FirefoxやIEなどのブラウザで見ると何の問題もなく表示されます。

しかし、PSPで確認すると「リスト1非表示要素」が表示されてしまいます。（「リスト2非表示要素」も同様）

さらに、li.list02以降の要素がdiv#mainの範囲を抜け、一つ上の階層のdiv#containerの要素となってしまいます。

これはどうやらul要素の中にさらにul要素を含むdivを入れたときに起こるようです。

尚、div#containerがbodyの直下にある場合、li.list02に上記の問題を含むコーディングがされているため、li.list03にはさらに一つ上の階層のbodyのプロパティが適用されることになります。

バグなのかなー。バグだよなあ。

ちなみにdivではなくspanだと親要素の範囲を抜けこそしないものの、display:noneは適用されません。

まともに適用されるプロパティもあったりなかったり。このへんよく分からない。

とりあえずul>div>ulの構造はおすすめできない。

もちろんPSPブラウザに限った話で、PCでは問題ないはずです。

もっともこのタイプの構造はmixi以外で見たことありませんけども。

あまり詳しく調べたわけではないので分かったのはここまで。

バリデータを通しても怒られないので、WEB標準的にNGなコーディングというわけではないと思うんですが