FacebookページをIEで見たときのスクロールバーを消す方法

facebook

IEで見たらfacebookページにスクロールバーが表示されてる!
ってことありませんか?んでもってそれが消えない・・・。って時に縦横のクスロールバーを表示しない方法の紹介です。

CSSでfacebookページのスクロールバーを非表示にする

基本的には開発者ドキュメントをスクロールバーを非表示にするには

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '<span style="color:#990033">自分のアプリIDを入力</span>',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>

上記を<body>~</body>の間に記述すればいいとのことですが、IEで確認するとばっちりスクロールバーが縦横ともに出ちゃいます。このIEでのスクロールバーを非表示にしてみます。

IEでの縦横のスクロールバーを非表示にする時にはポイントが3つ!

  • スタイルシートは外部から読み込む
  • CSSでoverflowを設定する
  • キャッシュが残るためCSSを変更時にはファイル名を変えて確認する

スタイルシートは外部から読み込む

基本的にはスタイルシートはファイル内に書き込まず、.cssファイルを作り外部から読み込むようにします。

CSSでoverflowを設定する

htmlとbodyにoverflowを設定します。

html {
overflow-y : hidden;
overflow-x : hidden;
 }

body {
margin:0px;
padding:0px;
font-size:12px;
line-height: 150%;
overflow-y : hidden;
overflow-x : hidden;
}

キャッシュが残るためCSSを変更時にはファイル名を変えて確認する

上記cssを設定してアップロードするとchromeやFFなどでは変更が反映されますが、IEではブラウザキャッシュが効いて反映されません。

そこで例えばCSSファイルがstyle.cssという名前のファイルだとするとstyle2.cssなどに別名保存してアップロードします。もちろんindexファイルからの読み込みの記述も変更します。

<link rel="stylesheet" href="css/style.css">

↓↓↓↓↓

<link rel="stylesheet" href="css/style2.css">

このようにして再アップロード。

これでスクロールバーを非表示にすることが出来ます。

今日の選択理由

IEでの縦横のスクロールバーを非表示にする時の3つ目のポイントは環境によりけりですが、意外とここでつまづく方が多いのではないかと思ったので、この記事を覚書として書いてみました!

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/social/943/trackback/