position: relative; を設定すると、
overflowした部分がそのまま表示され、
かつ、スクロールが効かなくなる現象があった。
Firefox 3 では問題ないが、IE7, IE8 で起きた現象。
IEのバグらしい。
(例)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.frame {
width: 100px;
height: 100px;
overflow: auto;
}
.item {
width: 80px;
height: 80px;
position: relative;
background-color: red;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="frame">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
</html>
※説明のために簡略化。
どうしてもrelativeが使いたかったのです。。。
解決方法としては、
1. DOCTYPEを無くすとうまく表示される。
つまり、互換モードにすればいいのかな。
でも、これだと全体の表示が崩れてしまいそう。
（もうすでにいろいろ書いていたので。)
2. .frame に position: relative; を追加する。
これでIEでもFFでも思ったとおりの表示になる。
FF, IE以外は確認してません。。。
0 件のコメント:
コメントを投稿