IEでスクロールできない

質問

作成しているサイトでＩＥでマウスホイールが動かなくて困っています。overflow:auto; とposition:relative;によるＩＥのバグは調べていてわかったのですが、私の知識では併用しないとサイト上、レイアウトが成り立たないため、方法を探しています。
また、画像やテキストの上でホイールを回転させるとスクロールします。
どなたか良い方法はご存じないでしょうか。
以下がその作成しているページです。
http://i.gmobb.jp/jp-struttin/index/exhibition.htm
よろしくお願い致します。

回答No.6

ORUKA1951

補足ですが、ウィンドウ巾は640pxあたりから上のサイズなら横スクロールなしで問題なく閲覧できるはずです。スマホや横幅1900pのディスプレイでも使える。横幅が1200を越えると中央に表示される。横に並ぶ数が変わります。

　古いIEはfixedに対応していないため、fixed.jsを拾ってきてください。

　印刷や他の端末を考慮するなら、mediaをscreenに限定してください。fixedでは各ページに印刷されます。

　HTMLには文書構造しか書かれていないので、スタイルシートだけを書き換えることで好きなデザインに変更できます。見出しだけ表示させておいて、マウスオーバーで画像や説明を表示させるとか、スライドショー形式にするとか、何でもできます。代替スタイルシートでユーザーに選択してもらっても良いでしょう。

　まあ、HTMLもスタイルシートも簡単で解りやすいのでここから先はご自身で挑戦してください。

お礼

長文どうもありがとうございます。
大変うれしいです。
実際に検証してみましたが、解決に至りませんでした。
ヘッダーごとスクロールするパターンに妥協しました。
ご回答ありがとうございました。

回答No.5

ORUKA1951

スタイルシートのみです。
たったこれだけです。
html,body{margin:0;padding:0;}
body{
＿background:url(http://i.gmobb.jp/jp-struttin/img/bg.jpg) no-repeat fixed;
＿background-size:cover;
}
div.header{
＿position:fixed;top:0;left:0;
＿width:100%;
}
div.header div.section{
＿width:100%;height:150px;
＿max-width:1200px;min-width:640px;margin:0 auto;
＿border-bottom:gray 1px solid;
＿background:url(http://i.gmobb.jp/jp-struttin/img/bg.jpg) no-repeat fixed;
＿background-size:cover;
＿z-index:10;
}
div.header div.nav ul{text-align:right;}
div.header h1{position:absolute;left:10px;top:20px;}
div.header div.nav{
＿width:100%;position:absolute;
＿bottom:0;right:10px;
}
div.header div.nav ul,
div.header div.nav ul li{list-style:none;margin:0;padding:0;}
div.header div.nav ul{display:block;width:100%;}
div.header div.nav ul li{
＿display:inline;margin-right:2em;margin-top:20px;
}
div.section,div.footer{
＿width:100%;height:150px;
＿max-width:1200px;min-width:640px;margin:0 auto;
}
div.section{margin-top:150px;position:relative;}
div.section h2{font-size:0.8em;}
div.section div.section{margin-top:0;}
div.section ol li a{text-decoration:none;color:black;}
div.section ol li a:hover{text-decoration:underline;}
div.section ol li ol{margin:0;}
div.section h2+ol{border-top:1px gray solid;}
div.section ol,div.section ol li{display:block;list-style:none;margin:0;padding:0;}
div.section ol,div.section h2,div.footer{clear:left;}
div.section ol,div.section h2{margin:0 5%;}
div.section ol li ol li h2{margin:0;}
div.section ol li{
＿width:200px;height:350px;float:left;
＿margin:10px;position:relative;
＿font-size:0.7em;font-weight:bold;
}
div.section ol li h3{font-size:100%;margin:0;}
div.section ol li img{
＿display:block;width:180px;
＿box-shadow:5px 5px 5px rgba(0,0,0,0.4);
}
div.section ol li ol li{
＿text-align:center;font-size:1.1em;float:none;
＿display:block;height:auto;font-weight:normal;
}
div.section ol li ol li+li{text-align:right;}
div.section ol li.ended:after{
＿content:url(http://i.gmobb.jp/jp-struttin/img/exhibition/ex_end.gif);position:absolute;bottom:50px;
}

回答No.4

ORUKA1951

＿＿＿<li class="ended">2011 12/3 sat-11 sun
＿＿＿＿<h3>Birne X'mas market</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_008.jpg" width="133" height="200" alt="Birne X'mas market"></li>
＿＿＿＿＿<li><a href="http：//birnebirne.com/index.html" title="Birne">Birne</a></li>
＿＿＿＿</ol>
＿＿＿<li class="ended">2011 11/27 sun
＿＿＿＿<h3>のふりま３</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_noimage.jpg" width="200" height="140" alt="のふりま３"></li>
＿＿＿＿＿<li><a href="http：//www.nofu.jp/" title="cafe nofu">cafe nofu</a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2011 11/5sat 6sun
＿＿＿＿<h3><a href="http：//minnanoich.exblog.jp/" title="みんなの市">みんなの市</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//minnanoich.exblog.jp/" title="みんなの市"><img src="/jp-struttin/img/exhibition/ex_007.jpg" width="209" height="141" alt="みんなの市"></a></li>
＿＿＿＿＿<li><a href="http：//www.cafegalleryconversion.com/" title="cafe gallery CONVERSION">cafe gallery CONVERSION</a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿</ol>
＿＿<ol>
＿＿＿<li class="ended">2011 10/22sat
＿＿＿＿<h3><a href="http：//k-kurafuto.com/" title="川口暮らふと">川口暮らふと</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//k-kurafuto.com/" title="川口暮らふと"><img src="/jp-struttin/img/exhibition/ex_006.jpg" width="209" height="188" alt="川口暮らふと"></a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2011 10/8 sut - 9 sun
＿＿＿＿<h3><a href="http：//www.shizuoka-tezukuriichi.com/" title="ART&amp;CRAFT静岡">ART&amp;CRAFT静岡</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.shizuoka-tezukuriichi.com/" title="ART&amp;CRAFT静岡"><img src="/jp-struttin/img/exhibition/ex_005.jpg" width="209" height="149" alt="ART&amp;CRAFT静岡"></a></li>
＿＿＿＿＿<li>静岡縣護國神社</li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2011 9/24 sat - 25 sun
＿＿＿＿<h3><a href="http：//creatorsfestival.ikidane.com/" title="クリエイターズフェスタ">クリエイターズフェスタ</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//creatorsfestival.ikidane.com/" title="クリエイターズフェスタ"><img src="/jp-struttin/img/exhibition/ex_noimage.jpg" width="200" height="140" alt="クリエイターズフェスタ"></a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2011 9/19 mon
＿＿＿＿<h3>まめなり市</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_noimage.jpg" width="200" height="140" alt="まめなり市"></li>
＿＿＿＿＿<li><a href="http：//curry-okra.jugem.jp/" title="carry&amp;cafe Okra">carry&amp;cafe Okra</a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿</ol>
＿＿<ol>
＿＿＿<li class="ended">2011 3/9wed-13sun
＿＿＿＿<h3>個展 前田美絵 陶展-若草色と夢想-</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_003.jpg" width="179" height="259" alt="個展 前田美絵 陶展　- 若草色と夢想 -" id="tate"></li>
＿＿＿＿＿<li><a href="http：//fall-gallery.com/" title="FALL shop&amp;gallery">FALL shop&amp;gallery</a><br>東京都杉並区西荻北3-18-10-102</li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿</ol>
＿</div>
＿<div class="section">
＿＿<h2>2010</h2>
＿＿<ol>
＿＿＿<li class="ended">2010 7/28wed-8/9mon
＿＿＿＿<h3>個展 前田美絵 陶展 -うみをおもふ-</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_002.jpg" width="269" height="182" alt="個展 前田美絵 陶展 -うみをおもふ-"></li>
＿＿＿＿＿<li>国立本店 国立市中1-7-62</li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2010 4/16fri-20tue
＿＿＿＿<h3>個展 前田美絵陶展</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_001.jpg" width="269" height="181" alt="個展 前田美絵陶展"></li>
＿＿＿＿＿<li>GALLERY it's<br>東京都渋谷区猿楽町2-7</li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿</ol>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

回答No.3

ORUKA1951

あまりにもなので、HTMLの修正に少しばかり苦労しました。後半とスタイルシートは次回に回します。
★Another HTML-lint 5 ( http：//www.htmllint.net/ )
で検証済みのHTML4.01strictです。(コメント部分は引っかかるけど)
★タブは＿に、http:はhttp：に置換してあります。戻すこと

HTMLが簡単なので、簡単に追加できるでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http：//www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>タイトル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<div class="section">
＿＿＿<h1><a href="/"><img src="/jp-struttin/img/logo.png" alt="[タイトル]" width="278" height="40"></a></h1>
＿＿＿<div class="nav">
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="/profile"><img src="/jp-struttin/img/profile.gif" width="13" height="29" alt="作家"></a></li>
＿＿＿＿＿<li><a href="/works"><img src="/jp-struttin/img/works.gif" width="12" height="44" alt="器"></a></li>
＿＿＿＿＿<li><a href="/ex"><img src="/jp-struttin/img/exhibition.gif" width="12" height="28" alt="展示"></a></li>
＿＿＿＿＿<li><a href="/blog"><img src="/jp-struttin/img/blog.gif" width="9" height="25" alt="日々"></a></li>
＿＿＿＿＿<li><a href="/contact"><img src="/jp-struttin/img/contact.gif" width="13" height="76" alt="問いあわせ"></a></li>
＿＿＿＿</ul>
＿＿＿</div>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>2012</h2>
＿＿<ol><!-- olはfloatを解除する -->
<!--
＿＿＿<li>日時(終了したらclass名をended)
＿＿＿＿<h3><a href="[URL]" title="[title]">雑司が谷手創り市</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="[URL]" title="[title]"><img src="/jp-struttin/img/[ファイル名]" width="[size]" height="[size]" alt="[代替テキスト]"></a></li>
＿＿＿＿</ol>
＿＿＿</li>
-->
＿＿＿<li>2011 12/18 sun
＿＿＿＿<h3><a href="http：//www.tezukuriichi.com/home.html" title="雑司が谷手創り市">雑司が谷手創り市</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.tezukuriichi.com/home.html" title="雑司が谷手創り市"><img src="/jp-struttin/img/exhibition/ex_009.jpg" width="149" height="160" alt="雑司が谷手創り市"></a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2011 12/3sat-11 sun
＿＿＿＿<h3>Birne X'mas market</h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><img src="/jp-struttin/img/exhibition/ex_008.jpg" width="133" height="200" alt="Birne X'mas market"></li>
＿＿＿＿＿<li><a href="http：//birnebirne.com/index.html" title="Birne">Birne</a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2012 10/13sat-14 sun
＿＿＿＿<h3><a href="http：//www.shizuoka-tezukuriichi.com/" title="ART&amp;CRAFT SHIZUOKA">ART&amp;CRAFT SHIZUOKA</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.shizuoka-tezukuriichi.com/" title="ART&amp;CRAFT SHIZUOKA"><img src="/jp-struttin/img/exhibition/ex_020.jpg" width="208" height="145" alt="ART&amp;CRAFT SHIZUOKA" ></a></li>
＿＿＿＿＿<li>静岡縣護國神社</li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿＿<li class="ended">2012 9/19 wed - 26 wed
＿＿＿＿<h3><a href="http：//www.padodo.co.jp/" title="pas de deux">そざいで遊ぶブローチ展</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.padodo.co.jp/" title="pas de deux"><img src="/jp-struttin/img/exhibition/ex_019.jpg" width="209" height="140" alt="そざいで遊ぶブローチ展"></a></li>
＿＿＿＿＿<li><a href="http：//www.padodo.co.jp/" title="pas de deux">pas de deux</a></li>
＿＿＿＿</ol>
＿＿＿</li>
＿＿</ol>
＿</div>
＿<div class="section">
＿＿<h2>2011</h2>
＿＿<ol>
＿＿＿<li class="ended">2011 12/18 sun
＿＿＿＿<h3><a href="http：//www.tezukuriichi.com/home.html" title="雑司が谷手創り市">雑司が谷手創り市</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.tezukuriichi.com/home.html" title="雑司が谷手創り市"><img src="/jp-struttin/img/exhibition/ex_009.jpg" width="149" height="160" alt="雑司が谷手創り市"></a></li>
＿＿＿＿＿<li>大鳥神社</li>
＿＿＿＿</ol>
＿＿＿</li>

回答No.2

ORUKA1951

まず重大なエラーは修正しておきましょう。
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
また、divの使い方が根本的に間違っています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
注。 CSSではclass属性が非常に大きな力を持っている。 したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。 しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。 文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より

<body>
　<div class="header">
　　文書のヘッダー
　</div>
　<div class="section">
　　本文
　　<div class="section" id="Y2012">
　　　<h2>2012</h2>
　　　<ol>
　　　　<li>商品名
　　　　　<ol>
　　　　　　<li>画像</li>
　　　　　　<li>説明</li>
　　　　　</ol>
　　　　</li>
　　　</ol>
　　</section>
　　<div class="section" id="Y2011">
　　　<h2>2012</h2>
　　　<ol>
　　　　<li>商品名
　　　　　<ol>
　　　　　　<li>画像</li>
　　　　　　<li>説明</li>
　　　　　</ol>
　　　　</li>
　　　</ol>
のように、既存のHTML要素にその文書構造を示す最適なものがあれば、それを使ってマークアップしましょう。
　Lynxなどのテキストブラウザ、あるいは画像を読み込まずとスタイルシートを解除した状態でページを見ると、なぜダメなのかがすぐわかるでしょう。
『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769 )』

　その上で、
div.header,div.section,div,footer{
width:100%;min-width:780px;max-width:1000px;
margin:0 auto;
}
div.section div.section{min-width:0;}
div.header{
position:fixed; height:150px;}
div.section{paddind-top:150px;}
div.section div.section{paddin-top:0;}
div.section div.section ol,
div.section div.section ol li{
display:block;list-style-type:none;
margin:0;padding:0;
}
div.section div.section ol li{
width:200px;height:300px;float:left;
}
div.section div.section ol li{float:none;}
div.section div.section{clear:left;}

だけで希望の動作になるはずです。
HTMLも今の半分、スタイルシートは一桁小さくなり、わかりやすくなるでしょう。
そして、スマートフォンのような小さなディスプレイでも、1900px幅の広いディスプレイでも閲覧できるでしょう。

回答No.1

kiyoto-777

1.絶対配置したものの上に絶対配置で記事などを載せて
その記事をスクロールさせるようにすれば、ＩＥではスクロールが
リンク部分のカーソルを乗せてスクロールしないと
スクロールできないことが起きます。

2.質問者の方のページはそれとはまったく関係ありません。

3.下記のスクリプト（プラグイン？）にスクリプトエラーがあります。
（ＩＥでスクリプトエラーが発生しています）
下記を外せば、ちゃんとスクロールできると思います（</head>の前の部分）
一時的に外して確認してみてください。

<script src="http://i.gmobb.jp/jp-struttin/js/jquery.shadow.js"></script>
<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
overflow: 'auto'
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.shadow').shadow('raised');
});
</script>

お礼

どうもありがとうございます。
遅くなりました。
いずれも実行してみましたが、うまくいきませんでした。。
ご回答感謝いたします。