このブログ、本来『Web成長期』のはずなのに
ちっともHTMLコードのことに触れてません。
．．．というわけで、というわけでもないのですが（なんのこっちゃ）。
ひさびさにCSSの勉強。
ことのはじまりはGebsite.orgというサイト。
このサイト、まずIE系ブラウザで見ると、
ナビげーショーンはロゴの下あたりに配置されています。
一方Gecko系ブラウザで見るとナビゲーションは一番下に。
しかもコンテンツをスクロールしても、
常にブラウザの最下部に表示されます。
しかもナビゲーション部分は半透明になってる！
この半透明をやってみたくて。
CSSで下記のように指定すればいいみたい。
数値は透明度なのかな。
filter:alpha(opacity=75); /*IE*/
-moz-opacity:0.75; /*FF*/
opacity:0.75;
参考サイト： CSSで半透明
というわけでTadaoh! Storyのフッタを半透明化してみました。
ところが。
「ブラウザの常に最下部に表示する」ために、
CSSで下記のように指定します。
position: fixed;
しかしこれがIEでは効かない。
しかも微妙に隙間ができてかっこ悪い。
そこでやむなくIEだけ適用されるCSSを設定。
プロパティの前に「_（アンダーバー）」をつけると
IEだけ適用されるんですね。これは便利。
例えば、
header{
width: 100%;
_width: 700px;
}
とすると、
IEではheaderは幅700ピクセルになりますが、
Geckoではheaderはブラウザの幅いっぱいとなります。
CSSでは同じ要素内で再定義すると一番最後の設定が適用される
特性を利用していますがGeckoでは二番目の「_width」は無視されます。
CSSを知ってる人には「そんなの当たり前じゃん」と
言われそうな内容ですが目から鱗が落ちた一幕でした。
コメント