Operaでのmark要素のバグ検証確認
- 2011/10/03 13:00 JST
Twitterで@tomo_eさんが
ここれは…ツライ… http://www.memo.marguerite.to/WWW/%E5%B9%B3%E6%88%9023%E5%B9%B4/7%E6%9C%8809%E6%97%A5-%E3%82%AA%E3%83%9A%E3%83%A911%E3%81%AE%3Cmark%3E%E8%A6%81%E7%B4%A0%E3%81%AE%E3%83%90%E3%82%B0.html
とつぶやかれているのを見て、リンク先の記事を読んだところ「<mark>要素にCSSでdisplay: inlineと設定すれば改行してしまう事を解消できるのでは?出きるのであれば<p>要素にdisplay: inlineを設定するよりスマートでは?」と思い、各種ブラウザで検証してみました。
<mark>要素は、HTML5で新たに追加された要素です。オペラ 11の<mark>要素のバグ(平成23年 7月 9日) - 『しらぎくのWWW作成入門』メモの記事内に記載してあるマークアップと同じ記述を使用させてもらい、<mark>要素にCSSでdisplay: inlineを設定して各種ブラウザ(Windows XP Opera 11.5,Firefox 4.0.1,Google Chrome 14.0.835.187,Safari 5.1,Internet Explorer 6,7,8 Windows 7 64ビット Internet Explorer9)で確認したところ、Opera 11.5以外のブラウザでは改行されず表示されたのですが、Opera 11.5のみ改行されてしまってました。(バグがあると記事にされているので当然の結果なのですが…)
しらぎくのWWW作成入門メモ。さんで記載されいる解決策制作者が見付けた唯一の解決策は、<p>要素に display: inline プロパティを当てる
方法では上記すべてのブラウザで改行されずに表示されていました。
ただ、<p>要素にdisplay: inline を設定するとOpera 11.5以外のブラウザでは行間が詰まってしまうのでうまく余白を設定する作業も追加されるので、Operaのバグが修正されるのがベストだと思いました。