margin: 0 !important;\r
padding: 0 !important; \r
display: table;\r
+ display: -moz-table; /* NN6 */\r
position: absolute;\r
top: 0;\r
left: 16.6%;\r
text-align: center;\r
font-size: 14px; /* opera6 で使用 13px は不可 */\r
display: table-cell;\r
+ display: -moz-table-cell; /* NN6 */\r
*display: block;\r
zoom: 1;\r
*position: relative;\r
<!-- InstanceBeginEditable name="main_content" -->\r
<div id="main">\r
<div id="breadcrumb"><a href="index.html">テスト インデックス</a> > ぺったんR html 実証サンプル version 0.1</div>\r
- <h2>ぺったんR html 実証サンプル version 0.1 2012.05.04</h2>\r
+ <h2>ぺったんR html 実証サンプル version 0.1.x 2012.05.04 ~</h2>\r
<h3>はじめに</h3>\r
<p>html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です.</p>\r
<p>この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか? を示す.文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない.</p>\r
<p>また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない.</p>\r
<p>この文書で示された html 構造は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる.</p>\r
\r
+ <h3>アップデート履歴</h3>\r
+ <h4>version 0.1.1 2012.08.19</h4>\r
+ <pre>\r
+ display: -moz-table;\r
+ display: -moz-table-cell;</pre>\r
+\r
+ <p>上記 css の追記により対応ブラウザが <del>NN7.2+</del> ⇒ <ins>NN6.2+</ins> となる.</p>\r
+ <p>ie5.01 ( winXP ) での正常表示を確認.</p>\r
+ \r
<h3>機能一覧</h3>\r
<dl class="dl-table clearfix">\r
<dt>正常動作確認済みブラウザ</dt>\r
- <dd>ie5.5+, NN7.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5</dd>\r
+ <dd>ie5.01+, NN6.2+, Opera7+, Konqueror4.8, Safari3.2, Iron5</dd>\r
<dt>吹きだしの語調</dt>\r
<dd>通常の語調のほかに、強調、コンピュータの合成音声</dd>\r
<dt>吹きだし内テキストのレイアウト</dt>\r
<dd>センタリング<del>、右より、左より</del></dd>\r
</dl>\r
- <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない.</p>\r
+ <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本テストでは扱わない.</p>\r
\r
<h3>表示サンプル</h3>\r
<p>表示サンプルは今後充実していくこととする.</p>\r
\r
<h3>ブラウザ検証</h3>\r
<h4>対応ブラウザ</h4>\r
- <p>NN7, NN8, NN9, firefox3.6, ie5.5, ie6, ie7, Safari3.2, Iron5, Opera10, opera8, opera7, Konqueror4.8(windows)</p>\r
+ <h5>Windows</h5>\r
+ <p>ie5.01+, NN6+, firefox3.6, Safari3.2, Iron5, opera7+, Konqueror4.8</p>\r
+ <h5>Mac</h5>\r
+ <h5>Linux</h5>\r
<h4>準対応ブラウザ</h4>\r
+ <h5>Windows</h5>\r
<p>opera6( <code>overflow:hidden</code> が孫要素に対して利かず(?)要素がパネルをはみ出す )</p>\r
+ <h5>Mac</h5>\r
+ <h5>Linux</h5>\r
<h4>非対応ブラウザ</h4>\r
- <p>NN6(テキスト表示位置がずれる), opera5( 日本語に非対応で文字化けする )</p>\r
- \r
+ <h5>Windows</h5>\r
+ <p><del>NN6(テキスト表示位置がずれる),</del> opera5( 日本語に非対応で文字化けする )</p>\r
+ <h5>Mac</h5>\r
+ <h5>Linux</h5>\r
<h3>ソースコード</h3>\r
<h4>html 部分</h4>\r
<p>パネルピクチャはひとつの <img> タグで表示されます.</p>\r
margin: 0 !important;\r
padding: 0 !important; \r
display: table;\r
+ display: -moz-table; /* NN6 */\r
position: absolute;\r
top: 0;\r
left: 16.6%;\r
text-align: center;\r
font-size: 14px; /* opera6 で使用 13px は不可 */\r
display: table-cell;\r
+ display: -moz-table-cell; /* NN6 */\r
*display: block;\r
zoom: 1;\r
*position: relative;\r