Hatena::Groupweb

vantguarde

 | 

12.2

正統なお尻PとHTML5のDOM構築とWebKitのoverflowと

| 20:17

ふむふむ。

イベントは面白いだろうということでさておいて、気になったのは小久保さんのプロフィールでスクロールバーが出るというのをタイムラインでちらほら見たこと。いまChrome 9で見てるんですが、たしかに出てますね。

ソースはこんな風になってます。

<div class="profile" id="kokubo">
<h4><img … />小久保 浩大郎<span ...></h4>
<p><a href="http://nodot.jp/">nodot</a><br />
フロントエンドアーキテクト</p>
<p>...</p>
<p>...</p>
</ul>
</p>
</div>

最後に</ul></p>なものが入っちゃってるんですね。正統なお尻Pですね。たぶん、高津戸さんのプロフィールをコピーしたときのleftoverなんでしょう。

この</ul></p>がどうなるかですが、HTML5ではin bodyのinsertion modeあたりに書いてあります。</ul>

If the stack of open elements does not have an element in scope with the same tag name as that of the token, then this is a parse error; ignore the token

の条件にマッチするので、無視されます。</p>も基本はparse errorではあるんですが、

If the stack of open elements does not have an element in button scope with the same tag name as that of the token, then this is a parse error; act as if a start tag with the tag name "p" had been seen, then reprocess the current token

なのでこの前に<p>があるものとして解釈され、結果的にp要素が挿入されると。

結果として、</ul></p>のところが<p></p>に置き換わる感じです。なんでこんなトリッキーなことをやってるのかは定かではないですが、たぶんTridentの挙動に合わせたとかそんなんじゃないかなと予想してます。

ふう。で、どうやらこの中身のないpoverflow: autoに反応してるようです。なぜoverflow: autoかけてるのかCSSちゃんと見てないんでよくわかんないんですが、要素を取ったりすると問題ないという。

font-size: 0を与えたり、中にテキストを突っ込むとスクロールバーが出なくなります。overflow: autoの挙動はUA依存なので正しい挙動なんてものはないんですが、テキスト突っ込んだりすると消えたりしますし、WebKitのバグなんですかねえ。ううむ。

 | 
Contact: @vant / lepetitcroissant@gmail.com.