single ie6対応のlightboxを作ろう\( ‘ω’)/ | Heastea's Blog , loves Music & Movies

いやはや、

またしても時間をさきました。

まあそれはいいとして。

 

lightboxをスクラッチで作ってたんですが、

Fuckin’ ie6で引っかかったのでまとめてみました(ΦωΦ)

 

【 ChromeとかSafariの場合 】

.lb_no_background_dayo{

position : fixed;
top : 0px;
left : 0px;
width : 100%;
height : 100%;
background-color : #000;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
z-index : 100;
}

これが背景で、

 

.lb_no_naiyou_dato_omou_yo{

position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 330px;
margin-top: -165px;
margin-left: -200px;
z-index: 101;
}

これが見せたいコンテンツ部分て感じになるかと思います。
(サイズを仮に、400px × 330pxとして。)

 

さて、

 

ie6では、

 

なんと、

 

fixedが、

 

ふぃっくすどがあああああああああ!!!!!!

 

ぁぁああ・・・効かなあああああいぅんだぁよぉぉぉうぅぅ・・・・( ˊ̱˂˃ˋ̱ )!!!!!!!

 

中村屋(゜o゜)!!!!!!!!

 

 

 

さてさて( ‘ω’)

この場合どうしたらいいのか。

もう結論からいいます

 

対応しない( ‘ω’)

 

そう言いはなって僕は飛び出した

気が付くと、尾崎豊の「僕が僕であるために」が頭のなかで流れていた

 

 

そんな僕の今回書いたcssがこちらになります( ‘ω’)

(lightboxとかいいつつ、opacityに関しては開き直って背景真っ黒です。だけどそんな自分も嫌いじゃないです。)

 

.lb_no_background_dayo{

position: fixed !important; //※ココ重要
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.7;
-moz-opacity: 0.7;
filter: alpha(opacity=70);
z-index: 100;

position: absolute; //※ココ重要
_top: expression(eval(document.documentElement.scrollTop+0)); //※ココ重要
}

 

.lb_no_naiyou_dato_omou_yo{

position: fixed !important; //※ココ重要
top: 50%;
left: 50%;
width: 400px;
height: 330px;
margin-top: -165px;
margin-left: -200px;
z-index: 101;

position: absolute; //※ココ重要
_top: expression(eval(document.documentElement.scrollTop+300)); //※ココ重要
}

 

説明すると、

absoluteにしちゃいます

なので、どの要素にも属さないようなhtml構造にしておくのがベストです

 

(例)

<バディー>

<div id=”wrapper”>


<p> watashi ha kamida ............</p>
<p> eeeee!!!!!!?????? ............</p>
<p> omae ga otosita noha ............</p>
<p> .............</p>
<p> .......... garufan wo ayameta , kono shirubanesu no ono ka????? ............</p>
...
...
...

</div>


<div class=”lb_no_background_dayo”></div>

<div class=”lb_no_naiyou_dato_omou_yo”>
<img src=”img/img_omotenashi.gif” alt=”OMOTENASHI” width=”400” height=”330” />
</div>


</バディー>

 

ほかのブラウザではfixedじゃないと困る、

けどabsoluteを下に書きたいので、

fixedにビックリインポータン追加してます

つまり、良いんだか悪いんだかわかりませんが、

!importantすらie6では無力なんです…(ΦωΦ)

 

 

また、実は、

heightの100%もふつうに書いても効きません。

効いてくれません。

効こうとも思ってません。

 

そこで、

html, body{
  _height : 100%;
}

 

って、

そっと追加してあげてください

 

そうするとブラウザがとても喜びます

 

喜ぶことによってheightの100%が効くようになります

 

_ を頭につけるのは、

 

ie6にだけこれが効いてほしい

 

そんな儚い願いが込められてるんですね

 

expressionて今回初めて知ったんですが

 

正直はっきりとしたことはよくわかりません

 

ただ、

 

 

 

こうすることで、

 

 

 

fixedと同じような効果が得られる

 

 

 

世界が少しハッピーになれる

 

 

 

それでいいんじゃないかと、僕は思うんです

 

 

 

いつの日か

 

 

 

そんな思いがieにも、届いたらいいな

 

 

 

 

 

ie6対応のlightboxを作ろう\( ‘ω’)/
Tagged on:                         

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Real time web analytics, Wordpress visitor counter, Wordpress visitor tracking
100{707d565477293aa85e4ba1a955542dbff9e59ca816fa2bbbb938b1d1f22b1004}Japan Japan

Total: 89