IEでスクロールできない

締切済

質問者：jp-struttin
質問日時：2012/09/20 22:10
回答数：6件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： ORUKA1951
回答日時：2012/09/22 01:06

　補足ですが、ウィンドウ巾は640pxあたりから上のサイズなら横スクロールなしで問題なく閲覧できるはずです。

スマホや横幅1900pのディスプレイでも使える。横幅が1200を越えると中央に表示される。横に並ぶ数が変わります。

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

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

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

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

- 1
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2012/09/27 12:50

No.5

回答者： ORUKA1951
回答日時：2012/09/21 20:09

スタイルシートのみです。

たったこれだけです。
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_ …
}

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2012/09/21 20:08

＿＿＿<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&CRAFT静岡">ART&CRAFT静岡</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.shizuoka-tezukuriichi.com/" title="ART&CRAFT静岡"><img src="/jp-struttin/img/exhibition/ex_005.jpg" width="209" height="149" alt="ART&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&cafe Okra">carry&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&gallery">FALL shop&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>© 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2012/09/21 20:03

あまりにもなので、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>

＿＿＿<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&CRAFT SHIZUOKA">ART&CRAFT SHIZUOKA</a></h3>
＿＿＿＿<ol>
＿＿＿＿＿<li><a href="http：//www.shizuoka-tezukuriichi.com/" title="ART&CRAFT SHIZUOKA"><img src="/jp-struttin/img/exhibition/ex_020.jpg" width="208" height="145" alt="ART&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>

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2012/09/21 09:30

まず重大なエラーは修正しておきましょう。

★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 … )］より

<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. … )』

　その上で、
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幅の広いディスプレイでも閲覧できるでしょう。

- 0
- 件

通報する

No.1

回答者： kiyoto-777
回答日時：2012/09/21 09:18

1.絶対配置したものの上に絶対配置で記事などを載せて

その記事をスクロールさせるようにすれば、ＩＥではスクロールが
リンク部分のカーソルを乗せてスクロールしないと
スクロールできないことが起きます。

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

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

<script src="http://i.gmobb.jp/jp-struttin/js/jquery.shadow.j …
<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>