PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくするの履歴ソース(No.1)

[[PukiWiki/1.4/ちょっと便利に/見出しとリストの拡張]]

* テーブルレイアウトいやーん [#vaf0eb51]

#ref(no_table.diff)

**テーブルレイアウトを排除したときの注意 -- [[reimy]] [#j81bcf7c]
~テーブルによるレイアウトを排除した場合、Opera 6/7では正常に表示できない場合があるので注意しましょう。
~具体的には、
 <div>
   <div style="float:right"><!-- (B) -->
      ほげほげ
      ........
      ........
      ........
      へげへげ
   </div>
   <div><!-- (A) -->
      ほげらほげら
      ............
      ............
      <div style="clear:both"></div><!-- (1) -->
      へてらへてら
      ............
      ............
   </div>
 </div>
 <div style="claer:both"></div><!-- (2) -->
とあった場合、(1)にclearがあっても親ブロック(A)の外側にあるBブロックのfloatが解除されてはいけないのですが、Opera 6/7は解除してしまいます。
 |ほげらほげら|ほげほげ|
 |............|........|
 |............|........|
 |へてらへてら|........|
 |............|へげへげ|
 |............|
となるべきものが、Opera 6/7では
 |ほげらほげら|ほげほげ|
 |............|........|
 |............|........|
 |            |........|
 |            |へげへげ|
 |へてらへてら|
 |............|
 |............|
になってしまいます。
~Internet Explorer 5/6、Netscape 6/7、Mozillaでは親ブロック(A)の外側にあるBブロックのfloatが解除されることはないので、正常に表示されます。

~これで問題になるのは、本文とメニューバーをfloatで左右に並べているとき(テーブルレイアウトを排除した場合は、通常はこうなっているはず)、本文中でclearが現われた場合です。

~claerが親ブロックの外側のfloatまで解除してしまうOperaのバグです。

~対策は左右を逆にする。floatを指定していない側のブロックにclearがなければ、Operaでも正常に表示できますので、左右のブロックを逆にすればよい。
~PukiWikiの場合、一般にメニューバーのブロックには原則としてclearがないので、本文のブロックを先に記述してfloatするとよい。つまり、メニューバーを左に置いた場合には上記の問題は発生しない。この場合、メニューバーよりも先に本文を記述することになるから、テキストブラウザや音声ブラウザのアクセシビリティも向上する。
 <div>
   <div style="float:right"><!-- (A) -->
      ほげらほげら
      ............
      ............
      <div style="clear:both"></div><!-- (1) -->
      へてらへてら
      ............
      ............
   </div>
   <div><!-- (B) -->
      ほげほげ
      ........
      ........
      ........
      へげへげ
   </div>
 </div>
 <div style="claer:both"></div><!-- (2) -->
PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくする の履歴ソース(No.1)

PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくするの履歴ソース(No.1)
