いつもお世話になっております。
色々調べて、cssの方もいじってみたのですが、解決できないことがあり
質問をさせていただきます。とても困っております、、、
過去に同じような状況を経験されたことがある方がいらっしゃいましたら
お力をお貸しいただけないでしょうか?
現在レスポンシブのLPページを作っているのですが、ごく限られた環境で意味不明なスクロールバーが
表示されています。自分の環境のwindows10ではスクロールバーが表示されなかったのですが、
クライアントのデスクトップPCでは表示されるとのこと。
<スクロールバーが出てしまう環境>
OS:windows10(同じ全てのwindows10ではなく特定のpc)
ブラウザ:chrome、firefox(いずれも最新)
作っているのはLPで相当長いページなので、全てを詳細に書くことはできないのですが
必要な部分を大まかに書くとこんな感じです。
html
1<body> 2<header> 3: 4</header> 5<div class="wrapper"> 6<section class="main"> 7<div class="slider"> 8</div> 9</section> 10</div> 11<footer> 12: 13</footer> 14</boby>
css
1* { 2 box-sizing: border-box; 3 -webkit-box-sizing: border-box; 4 -moz-box-sizing: border-box; 5 -o-box-sizing: border-box; 6 -ms-box-sizing: border-box; 7 -webkit-text-size-adjust: 100%; 8} 9 10img { 11 max-width: 100%; 12} 13 14html, 15body { 16 font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Roboto, 'Droid Sans', sans-serif; 17 font-size: 14px; 18 letter-spacing: 0.1em; 19 width: 100%; 20 height: 100%; 21 font-weight: 200; 22 font-style: normal; 23 line-height: 1.7; 24 margin: 0; 25 padding: 0; 26} 27 28.wrapper { 29 overflow: hidden; 30} 31 32section{ 33 width: 1000px; 34 margin: 0 auto; 35} 36 37.slider{ 38 overflow: hidden; 39} 40 41@media screen and (max-width: 1000px) { 42section{ 43 width: 100%; 44} 45} 46
<設定>
1カラム構成。
PCではsectionが1000px固定となっており、1000pxを切った段階で
width100%に切り替わります。
<状況>
1000pxを切った時点で、添付画像のような縦横のスクロールバーが表示され、下にスクロールして行っても
この赤線の縦横スクロールバーがついてくる。
スライダー等のコンテンツを含むため、「.slider」にも念のため「overflow: hidden;」を入れています。
少しでも、ヒントが見つかればと思い、すがる気持ちで質問をさせていただきました。
何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/09 01:28
2017/05/09 06:06
2017/05/09 13:45 編集
2017/05/10 01:46