###前提・実現したいこと
CSSを使用して、フリックするコンテンツを制作しました。(レスポンシブ対応)
PC版だと横スクロールバーを display: none; で消しているのですが、
IEとFirefoxで横スクロールバーが消えません。
なんとか、IEとFirefoxでも横スクロールバーを消したいと思っています。
###該当のソースコード
[HTML]
<!doctype html> <html> <head> <meta charset="utf-8"> <title>フリック</title> <link rel="stylesheet" href="css/style.css"> <meta name="viewport" content="width=device-width,user-scalable=yes,maximum-scale=2.5"> </head> <body> <div class="container"> <div class="set_2col_flick"> <dl class="set_2col_flick_card"> <dt><a href="#"><img src="images/dummy.jpg" alt=""></a></dt> <dd>テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキストテキスト・テキスト・テキスト・テキスト</dd> </dl> <dl class="set_2col_flick_card"> <dt> <a href="#"><img src="images/dummy.jpg" alt=""></a> </dt> <dd>テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキスト・テキストテキスト・テキスト・テキスト・テキスト</dd> </dl> </div><!--/.set_2col_flick--> </div><!--/.container--> </body> </html>
[CSS]
/* フリック */ .set_2col_flick { border: 5px solid #F99207; padding: 10px; } .set_2col_flick { display: -ms-flexbox; /*--- IE10 ---*/ display: -webkit-flex; /*--- safari(PC)用 ---*/ display: flex; overflow-x: scroll; } .set_2col_flick img{ width: 100%; height: auto; } .set_2col_flick .set_2col_flick_card { max-width: 170px; min-width: 170px; margin: 0 0px; padding: 10px; } /*PC用*/ @media print, screen and (min-width:641px){ .container{ width:960px; margin:0 auto; } .set_2col_flick::-webkit-scrollbar { display: none; } .set_2col_flick { display: -ms-flexbox; /*--- IE10 ---*/ display: -webkit-flex; /*--- safari(PC)用 ---*/ display: flex; overflow-x: none; } .set_2col_flick .set_2col_flick_card { max-width: 50%; max-width: 50%; padding: 0px; } .set_2col_flick .set_2col_flick_card dt{ width:50%; float: left; text-align: left; } .set_2col_flick .set_2col_flick_card dd{ width:44%; float: left; margin-left: 3%; } .set_2col_flick img { width: 100%; height: auto; } }
ダミー画像は、1000px×1000pxとなっております。
お手数ですが、みなさまのご教授をお待ちしております。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/05 08:30