IE6にも対応させました!スクロールしてもついてくるソーシャルボックス
こんにちは、霙です。
先日公開しご好評いただいたソーシャルボックスたんですが、実はIE6非対応でした。
世の中には、私のようにIEの存在を完全に無視している方は少数派のようですので、
CSSを書き加えるだけでIE6でも動くコードをご紹介致します。
これをheaderに書き足すだけ。
IE7未満のブラウザに対して以下の命令をしてあげるだけでOKなのですよ!top値は調整してくださいね。
<header>~</header>
<!--[if lt IE 7]>
<style type="text/css">
#social_box {
position: absolute;
top: expression(eval(document.documentElement.scrollTop+300));
}
</style>
<![endif]-->
その他のコードは前回とまったく同じです。
HTML
<div id="wrap">
<ul id="social_box">
<li>お好きなソーシャルボタンのコード</li>
<li>お好きなソーシャルボタンのコード</li>
<li>お好きなソーシャルボタンのコード</li>
</ul>
<div id="main"></div>
<div id="side"></div>
</div>
CSS
#wrap{
width:960px;
margin:10px auto;
}
#social_box{
background:#fff;
width:60px;
padding:15px;
margin-left:-100px;
text-align:center;
position:fixed;
top:300px;
list-style-type:none;
}
#main{
width:660px;
float:left;
}
#side{
width:300px;
float:left;
}
はい。これでIE6でもちゃんと動くようになったのではないでしょうか?当サイトには相変わらず実装しておりませんが。
IEで見た時なんかカクカクする・・?
そういう方は下記のコードをbodyのcssに書き加えてみてください。
CSS
body{
background: url(null) fixed #ffffff;
}
そんな感じで皆さんのブログにぜひぜひ実装してみてくださいね!
以上、霙でした!
IEアイコン配布元:Destroy, Ie, Internet explorer icon | Icon Search Engine
5/25追記
この記事がお役に立ったら
いいね!お願いしまっす
(*´∨`*)
この記事を書いたみぞれしはTwitterをやっています
Follow @xxmiz0rexx