overflowプロパティへの対応が不完全

症状

overflowプロパティのサポートが不完全であり、閲覧時に問題が発生することがある。

  • Opera6はすべての要素においてauto値とscroll値に対応しておらず、それぞれvisible値とhidden値を指定したものとして扱う。ただしbody要素については常にauto値であるものとして扱う。
  • Opera7はauto値やscroll値をサポートしているが、html要素については常にauto値であるものとして扱う。また、テーブルセル要素は常にhidden値であるものとして扱う。
  • Opera7では、内部にフロートを含みwidthプロパティとheightプロパティがauto値である要素に overflow:auto; を指定したとき、そのボックスからはみ出るフロートが見えなくなる。

例示

<div style="overflow:scroll; width:8em; height:4em; float:left; background:lime;">
A<br>B<br>C<br>D<br>E<br>F<br>G</div>
<div style="overflow:auto; width:8em; height:4em; float:left; background:aqua;">
1<br>2<br>3<br>4<br>5<br>6<br>7</div>
<div style="overflow:auto; clear:left; border:2px solid blue;">
<div style="float:left; width:5em; background:yellow;">
float<br>float<br>float<br>float
</div>
回り込み<br>回り込み</div>
A
B
C
D
E
F
G
1
2
3
4
5
6
7
float1
float2
float3
float4
回り込み
回り込み

最初のdiv要素はoverflowプロパティにscroll値を指定したとき、次のdiv要素は同じくauto値を指定したとき、最後はフロートを含むdiv要素にauto値を指定したときの例です。

スクリーンショット

WinIE6WinIE6.0での表示（標準モード）

Op6Opera6.06での表示

Op7.2Opera7.21での表示（標準モード）

補足

スレ3の548で提示されたソースを以下に引用しています。

<html>
<head>
<title>MENU</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
body{overflow:auto}
-->
</style>
</head>

<body bgcolor="#F0F0F0" text="#000000" leftmargin="0" topmargin="15" marginwidth="0" marginheight="15">
<table border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td>
<p><img src="img/menu/title_a.gif" width="84" height="20"></p>
<p><a href="main.html"><img src="img/menu/top.gif" width="170" height="25" border="0"></a></p>
<p><a href="cgi-bin/bbs/thebbs.cgi"><img src="img/menu/bbs.gif" width="170" height="25" border="0"></a></p>
<p><a href="cgi-bin/imgbbs/index.html"><img src="img/menu/bbs_g.gif" width="170" height="25" border="0"></a></p>
<p><a href="cgi-bin/chat/index.html"><img src="img/menu/chat.gif" width="170" height="25" border="0"></a></p>
<p><a href="kikaku/index.html"><img src="img/menu/kikaku.gif" width="170" height="25" border="0"></a></p>
<p><a href="link/index.html"><img src="img/menu/link.gif" width="170" height="25" border="0"></a></p>
</td>
</tr>
</table>
</body>
</html>

これは、 overflow:auto; を指定しているがwidth, heightは指定していない要素（body要素）の子にフロート（align="right"を指定したtable要素：floatプロパティを使用していないがフロートのような状態になる）が含まれている状態です。このときOperaでは、table要素のボックスのうちbody要素のボックスからはみ出る部分が表示されません。

overflow:auto; を指定した要素にwidthプロパティまたはheightプロパティを具体的な値で指定するか、clearプロパティを指定した要素をフロートの後方に置くなどして親要素のボックスの高さを充分に大きくすることで不具合を回避することができます。

修正状況

Opera6.06、Opera7.21で不具合の発生を確認しました。

関連記事

スポンサーリンク

ls ファイルやディレクトリの情報を表示する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る